Webpack之不同模式的区分打包

引入

Webpack针对development和production两种模式各自有一些默认的配置，以及个人设置的一些配置。

例如在开发环境中，我们通常会使用devServer搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。

用过create-react-app的人肯定都知道这些脚手架工具针对不同的模式，也有不同的命令，例如：yarn start、yarn dev等。

初步的区分打包

新建两个文件，分别是：webpack.dev.js和webpack.prod.js。一个代表开发模式下打包所使用的配置文件，另一个则是生产环境下所使用的配置文件。

然后把原有的webpack.config.js内的内容拷贝到两个文件中去，对不同环境做差异化修改。例如，生产环境下就没必要使用devServer。最重要的当然还是修改mode。

接着对package.json进行修改，在script中添加两个命令：

"script":{
    ...,
    "dev": "webpack-dev-server --config ./webpack.dev.js",
    "build": "npx webpack --config ./webpack.prod.js"
}

这样我们就可以直接使用yarn dev或yarn build来对应不同环境下的打包。

更进一步的区分打包

上面的那样的区分打包有一个很显然的问题，就是拆分出来的两个配置文件重复代码太多了。

那么自然的，我们就会想到代码的复用，再拆分一个通用的配置，然后原有的两个配置文件就编写不同模式下针对性的配置，使用的使用两者进行融合即可。

webpack.dev.js：

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');
const devConfig = {
    devServer: {
        contentBase: './dist',
        open: true,
        hot: true,
        hotOnly: true
    },
    mode: 'development',
    optimization: {
        usedExports: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

module.exports = merge(commonConfig, devConfig);

webpack.prod.js：

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');
const prodConfig = {
    mode: 'production'
};

module.exports = merge(commonConfig, prodConfig);

webpack.common.js：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(webp|jpg|png)$/,
            use:{
                loader: 'url-loader',
                options: {
                    limit: 2048,
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }],
    },
    plugins: [
        new HTMLWebpackPlugin({template: 'src/index.html'}),
        new CleanWebpackPlugin(),
    ]
};

可以看见，我们又使用了一个webpack-merge的库，它可以帮助我们事先通用配置和特殊配置的融合。