0
点赞
收藏
分享

微信扫一扫

webpack的development与production模式区分打包


安装插件:npm i -D webpack-merge

将以前的webpack.config.js拆分为三个文件

  • webpack.common.js 开发与线上共同需要配置
  • webpack.dev.js 开发环境下所需的配置
  • webpack.prod.js 线上环境下所需的配置

webpack.prod.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');

const prodConfig = { // 配置好后 npx webpack
mode: 'production', // development 不压缩 production 默认是被压缩
devtool: 'cheap-module-source-map', // production 生产环境
};

module.exports = merge(commonConfig, prodConfig);

webpack.dev.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');

const devConfig = { // 配置好后 npx webpack
mode: 'development', // development 不压缩 production 默认是被压缩
devtool: 'cheap-module-eval(commonConfig, devConfig);

webpack.common.js(正常配置即可)

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {

}

package.json下的配置

"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},

举报

相关推荐

0 条评论