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的庫，它可以幫助我們事先通用配置和特殊配置的融合。