1. 配置:
上面是官方的原话~~~
下面我们将会分别创建开发环境与生产环境的webpack配置文件,并将两个配置文件中公共用到的部分抽离出来,存放到一个公用配置文件中,最后通过webpack-merge这个工具我们将公共配置合并到开发与生产配置中。
首先下载webpack-merge:
npm install --save-dev webpack-merge
文件目录中添加以下几个配置文件:
webpack.common.js:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
]
}
webpack.dev.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
})
webpack.prod.js:
const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin()
]
})
2. 重新指向NPM Script
这样我们就可以按照自己的需求分别配置我们的开发和生产环境,并根据需要执行。
当然这个只是为了测试用的配置,我们打包的话肯定是会报错的,毕竟对于我们之前写的demo,仍然还缺少很多配置。所以我们改回用之前的webpack.config.js。
3. 指定环境
是不是看不懂,我也看不懂啊。。。
看不懂,手撸下代码吧:
我们在原来的webpack.config.js中进行如下配置:
在webpack.config.js中配置如下:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
然后我们再进行相应的打包,发现报错:
什么鬼,还报webpack没有定义。。。
哦,忘记引入webpack模块了,我们在webpack.config.js文件开头引入就好:
const webpack = require('webpack');
那么接下来我们继续吧!!!
对文件进行打包后看看,没有发现任何问题,但我们还没用到process.env.NODE_ENV,我们在出口文件中使用它,如下:
console.log(process.env.NODE_ENV);
if(process.env.NODE_ENV == 'production') {
console.log('Looks like we are in development mode');
}
同时我们将之前上一章中package.json设置的sideEffects配置删除(以免无意中将我们些的测试代码删除),重新打包看看:
结果发现我们之前写的代码根本没有打包进来,官网对于这个问题给出了答案:
根据官网的指示,我们可以查看相应的#2537文章,具体没有特别看懂,以下是我从中知晓的:
- 讨论主题是说通过命令中的-p配置不能设置process.env.NODE_ENV为production值;
- 通过在命令行中可以单独设置NODE_ENV的值,然后在webpack配置文件中通过DefinePlugin配置process.env.NODE_ENV变量为全局;
下面我们按照大佬们的方法配置:
首先在script脚本中配置NODE_ENV参数,如下:
然后,在webpack中进行配置:
这样,我们在打包之后就会是这个样子:
这时我们发现相应的内容已经被打包进去了。
另外,其实如果仅仅在命令脚本中设置其实入口文件中已经可以引用到了,具体有什么区别不是特别清楚,但只要在配置文件中设置了DefinePlugin,就可以保证全局引用。下面是没有在配置文件中配置DefinePlugin的情况:
接下来,我们更改index.js文件中的内容,如下:
然后我们再进行打包:
可以看到,我们之打包了输出process.env.NODE_ENV的部分,并没有打包‘look like we are in development mode’这一部分,也就是说,根据DefinePlugin配置的全局变量,我们可以控制打包的脚本,正如上面的情况,通过判断process.env.NODE_ENV这个变量,我们看可以配置生产环境和开发者环境下相应的打包代码。
举个栗子,我们在开发者环境中往往会输出一些log来进行调试,而生产环境下我们就不需要这些代码了,通过上面的这种方式,我们可以控制打包后是否有这些log调试代码,避免了我们手动修改而可能忽略的问题。