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调试代码，避免了我们手动修改而可能忽略的问题。
