其实我么之前已经将webpack.config.js 按环境进行去了区分配置,那么在公共配置文件中我们能否知道当前所处的环境,并据此做逻辑区分呢?
对于 webpack.config.js 来讲,除了导出一个对象以外,其实还可以导出一个函数。
// webpack.common.js
const path = require('path');
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod');
const merge = require('webpack-merge');
const commonConfig = {
entry: {
index: "./src/index.js"
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: "[name].bundle.js",
},
module: {
rules: [
{
test: /\.(jpg|jpeg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
]
},
{
test: /\.(eot|svg|ttf|woff)$/,
use: 'file-loader'
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
module.exports = (env, argv) => {
console.log('===', env, argv);
if (env && env.production) {
return merge(commonConfig, prodConfig);
}
return merge(commonConfig, devConfig);
};
// webpack.dev.js
var path = require('path');
var devConfig = {
mode: 'development',
devtool: "cheap-module-eval-source-map",
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true,
port: 3000,
},
};
module.exports = devConfig;
// webpack.prod.js
var prodConfig = {
mode: 'production',
devtool: "cheap-module-source-map"
};
module.exports = prodConfig;
"dev": "webpack --config ./build/webpack.common.js --watch",
运行 npm run dev,会发现:
image.png
现在 env 是空的,argv 是我们的一些运行参数。我们现在手动传入 env:
"dev": "webpack --env.development --config ./build/webpack.common.js --watch",
image.png
发现此时 env 是我们在脚本指定的值,并且同时该属性也保存到了 argv。这样我们就可以根据环境做区分打包了:
"dev": "webpack --env.development --config ./build/webpack.common.js --watch",
"build": "webpack --env.production --config ./build/webpack.common.js"
对于配置文件,我们可以使用 env,那么在源码当中,我们是否可以利用环境变量呢?可以看 mode
image.png
mode 本身会通过 DefinePlugin 提供一个全局变量。我们来看下:
// index.js
console.log('-----', process.env.NODE_ENV);
打包如下:
image.png
我们就可以在源码中根据这个变量来进行环境的区分。这里涉及到 DefinePlugin 插件,这个插件可以定义一些全局的变量,我们可以在模块当中直接使用这些变量,无需作任何声明。
合理利用环境变量,能帮助我们简化逻辑。但要防止滥用,能通过配置文件单独区分配置的还是尽量写在配置文件,方便维护。
webpack4系列教程(九):开发环境和生产环境 https://webpack.js.org/configuration/mode/#mode-development NODE_ENV和webpack 理解webpack之process.env.NODE_ENV详解(十八) Webpack DefinePlugin And ProvidePlugin