目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。
对于复杂的项目来说，需要复杂的配置，这时候分解配置文件为多个小的文件可以使得事情井井有条，以上面的例子来说，我们创建一个webpack.production.config.js的文件，它的配置在原始的webpack.config.js中修改了如下配置项。
因为development是开发环境，production是生产环境，开发环境的一些配置在生产环境中不需要，所以需要将以下配置项删除

修改后的配置如下

const webpack = require('webpack'); //引入webpack
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件

module.exports = {
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "production",
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/public", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [ // 请注意这里对同一个文件引入多个loader的方法。
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            // 指定启用css modules
                            modules: {
                                //指定css的嘻哈类名格式
                                localIdentName: '[path][name]__[local]--[hash:base64:5]'
                            }
                        }
                    }
                ],
                exclude: /node_modules/
            },
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            //new 一个这个插件的实例，并传入相关的参数
            template: __dirname + "/app/index.tmpl.html"
        })
    ] 
}

在package.json中的scripts字段下配置build

注意:

如果是window电脑，build需要配置为"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"。

如果是Mac电脑，build可以直接配置为"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"。

优化插件

webpack提供了一些在发布阶段非常有用的优化插件，它们大多来自于webpack社区，可以通过npm安装，通过以下插件可以完成产品发布阶段所需的功能

OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID

缓存

缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）

webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前
我们来修改webpack.production.config.js文件

下面我们来运行下npm run build看下结果

clean-webpack-plugin

添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多，因此我们可以用clean-webpack-plugin。

安装

npm install --save-dev clean-webpack-plugin

同样需要在webpack.production.config.js文件中的plugins字段下配置

运行 npm run build

每次打包都会清除之前的打包文件然后重新去生成打包文件