拆分配置文件

在实际开发过程中，我们不会把开发的配置和生产的配置写在一个 webpack.config.js 中，这样打包的时候搞起来很麻烦，通常我们会通过环境变量来合并不同的配置文件。
拆分成三个文件：

• webpack.base.js 基础配置，开发环境和生产环境都需要
• webpack.dev.js 开发配置，只有开发环境需要
• webpack.prod.js 生产配置，只有生产环境需要

我们把这三个文件放到 build 文件夹中集中管理。

build—
     |-webpack.base.js
     |-webpack.dev.js
     |-webpack.prod.js

然后我们拆分下功能，以之前的配置文件为例.

配置文件

webpack.base.js

/** ./build/webpack.base.js **/
let path = require('path');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let ESLintWebpackPlugin = require('eslint-webpack-plugin');
let { merge } = require('webpack-merge');
let htmlPlugins = ['index'].map(chunkName => {
    return new HtmlWebpackPlugin({
        filename: `${chunkName}.html`,
        inject: 'body',
        chunks: [chunkName],
        template: `./public/${chunkName}.html`
    })
});
let base = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'js/[name].[contenthash:8].js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 忽略掉不要进行loader处理的文件
                include: path.resolve(__dirname, './src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', {
                            useBuiltIns: 'usage',
                            corejs: { version: 3 }
                        }]],
                        plugins: [
                            '@babel/plugin-transform-runtime',
                            ['@babel/plugin-proposal-decorators', { "legacy": true }]
                        ],
                    }
                }
            },
            {
                test: /\.(htm|html)/,
                use: 'html-withimg-loader',
            },
            {
                test: /\.(ttf|woff|woff2|svg|eot)$/,
                use: ['file-loader']
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240,
                            esModule: false,
                            outputPath: "img"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        ...htmlPlugins,
        new ESLintWebpackPlugin()
    ]
}
let dev = require('./webpack.dev');
let prod = require('./webpack.prod');
module.exports = (env) => {
    console.log(env);//{ production: true }
    if (env.production) {
        return merge(base, prod);
    } else {
        return merge(base, dev);
    }
}

webpack.dev.js

let devConfig = {
    mode: 'development',
    devServer: {
        port: 3000,
        open: true,
        compress: true,
        static: './dist',
    },
    devtool:'source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}

module.exports = devConfig;

webpack.prod.js

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let prodConfig = {
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({})
    ]
}

module.exports = prodConfig;

脚本配置

我们看 webpack.base.js 的 82 行，这边将函数作为配置文件的返回值，将会获得一个环境变量，这个环境变量怎么来的，在 package.json 的脚本中配置。

{
  "scripts":{
    "build":"webpack --env production --config build/webpack.base.js",
    "dev":"webpack-dev-server --env development --config build/webpack.base.js"
  }
}

合并 config 文件

我们在合并 config 文件时，使用了 webpack-merge 包，可以自动合并 config 文件，非常方便

yarn add webpack-merge --dev