webpack Develoment 和 Production 模式的区分打包

代码语言：javascript复制

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git

webpack.common.js

代码语言：javascript复制

const merge = require('webpack-merge')
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')

const commonConfig = {
    entry: { // 上面是简写
        // lodash: './src/lodash.js',
        // myVue: './src/index.js',
        sub: './src/main.js'
    },
    output: { // 输出到bundle/bundle.js
        // publicPath: 'https://localhost:8080//', // 类似base_url
        filename: '[name].js', // 打包文件的文件名 这样entry可以配置两个入口js 入口文件走这里
        chunkFilename: '[name].chunk.js', // index.js里又引入的js走这里
        // path: path.resolve(__dirname, './dist') //  __dirname指webpack.config.js文件的当前路径
    },
     resolve: {
        // extensions: ['.js', '.vue', '.json'], // 可以导入的时候忽略的拓展名范围
        extensions: ['.js', '.json', '.vue', '.scss', '.css'], // 省略文件名后缀
        alias: {
            '@': resolve('src'),
            zj: resolve('src/components'),
            mioJs: resolve('src/common/js'),
            json: resolve('src/static/mockJson')
        }
    },
}

module.exports = (env) => {
    if (env && env.production) { // 线上环境
        return merge(commonConfig, prodConfig)
    } else { // 开发环境
        return merge(commonConfig, devConfig)
    }
}

代码语言：javascript复制

webpack.dev.js
const devConfig = {
     mode: 'development', // development production 默认是被压缩
     devtool: 'cheap-module-eval-source-map', // development 开发环境最优配置
     devServer: { // 可以开启一个web服务器， 不生成dist目录，放到内存中
        contentBase: './dist',
        open: true, // 自动打开浏览器
        port: 9999,
        // historyApiFallback: false,
        // hot: true,
        // hotOnly: true, // 浏览器不刷新
        proxy: { // 跨域代理
            '/api': 'http://localhost:3030'
        }
    },
}
module.exports = devConfig

代码语言：javascript复制

webpack.prod.js
const prodConfig = { // 配置好后 npx webpack
    mode: 'production', // development  production
    devtool: 'cheap-module-source-map', // production 生产环境
}

module.exports = prodConfig

webpack production

0 人点赞