webpack生产环境和开发环境的配置

最近在做公司游戏预约页面的时候，在配置webpack的时候，忽略了生产模式切换，导致开发过程中有些痛苦，当改动样式或者某个插件配置时，本地server要等待编译很久才生效。用了很久的webpack做开发，之前一直没太在意，现在特地整理下，也为以后做项目更加规范吧。

在配置前，还是先了解下生产环境和开发环境有哪些区别，知道这些后，才知道我们到底要做些什么

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置

虽然，以上我们将生产环境和开发环境做了略微区分，但是，请注意，我们还是会遵循不重复原则(Don't repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码

那么，开始配置文件的编写。这里，我们把公共的配置，放到webpack.common.js中，生产环境配置放到webpack.prod.js中，开发环境配置放到webpack.dev.js中。

公共配置（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'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

生产配置（webpack.prod.js）中配置"source-map"，生产环境下的插件，然后合并

const merge = require('webpack-merge');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
})

注意这里使用了webpack.DefinePlugin()插件，来指定环境。这是因为，许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码

开发环境（webpack.dev.js）中配置"inline-source-map"、本地服务器，然后合并公共配置

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
})

现在，我们可以在package.json中为生产和开发模式配置单独的运行脚本，