demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次分离生产模式和开发模式的配置: https://blog.csdn.net/qq593249106/article/details/84964816
之前因为开发模式不需要压缩 css,将不同的压缩 rule 分别写在 webpack.prod.js 和 webpack.dev.js 文件里:
webpack.prod.js
rules: [
{
test: /\.(sa|sc|c)ss$/,
include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
use: [
MiniCssExtractPlugin.loader, //生产模式使用分离代码插件
'css-loader',
'sass-loader',
]
}
]
webpack.dev.js
rules: [
{
test: /\.(sa|sc|c)ss$/,
include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
use: [
'style-loader', //开发模式不使用插件
'css-loader',
'sass-loader',
]
}
]
现在将这两个代码提取到 webpack.common.js,并用 process.env.NODE_ENV 变量来区分是当前是生产模式还是开发模式
因为 defindPlugin 这种用法:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
无法在 webpack 的配置文件中获取到 process.env.NODE_ENV,它是暴露给 src 文件夹下的文件,如 index.js 就可以获取到 process.env.NODE_ENV 的值为 production
所以这里要用到 cross-env 插件
npm install cross-env --save-dev
在 NPM 脚本加上:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --progress --config ./config/webpack.prod.js",
"dev": "webpack-dev-server --open --hot --progress --config ./config/webpack.dev.js"
},
在 webpack.common.js 加上:
console.log(process.env.NODE_ENV);
输入 npm run build,查看输出:
成功输出了 production,这样就可以用 process.env.NODE_ENV 来区分生产模式还是开发模式了
合并一下代码:
webpack.common.js
module.exports = {
mode: process.env.NODE_ENV ? 'production' : 'development',
module: {
rules: [ //公共配置加载器
{
test: /\.(sa|sc|c)ss$/,
include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
use: [
process.env.NODE_ENV ? MiniCssExtractPlugin.loader : 'style-loader', //生产模式使用分离代码插件, 开发模式不使用
'css-loader',
'sass-loader',
]
}
]
}
}
运行 npm run build,和 npm run dev 都没问题