为不同的场景，使用不同的配置文件

我们在开发中使用webpack时，往往要针对不同的场景，打出不同的包，比如生产环境下是一种，开发环境下是另一种。通常对不同场景的配置，我们都一股脑地写在了webpack.config.js中，这样产生的负面影响就是混乱，代码也混乱，配置内容也混乱，跟面条一样，绕啊绕，不停地绕。

要解决这种情况，我们的解决思路是：为不同的场景，使用不同的配置文件。说白了就是：各个场景公用的配置我们写在同一个文件中，各个场景独有的配置写在不同的文件中。

比如，针对生产环境和开发环境，webpack`配置文件的目录可以设计成这样：

配置文件的目录

在build目录下存放着全部的配置文件，其中：

webpack.base.config.js是通用配置文件；

webpack.dev.config.js是开发环境的配置文件；

webpack.pro.config.js是生产环境的配置文件；

在webpack.base.config.js中是通用的配置，比如：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.ts',    // 入口，从哪个文件开始打包
    output: {                   // 出口
        filename: 'bundle.js',  // 打包后的文件名
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [{
            test: /\.tsx?$/i,
            use: [{
                loader: 'ts-loader'
            }],
            exclude: /node-modules/
        }, {
            test: /\.scss$/,
            use: [
                'style-loader', // 将 JS 字符串生成为 style 节点
                'css-loader',   // 将 CSS 转化成 CommonJS 模块
                "sass-loader"   // 将 Sass 编译成 CSS
            ],
            exclude: /node-modules/
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

在webpack.dev.config.js中是与开发环境相关的配置内容，比如：

const path = require('path');
const merge = require('webpack-merge');
const baseConf = require('./webpack.base.config');

const conf = {
    mode: 'development', 
    devServer: {                // 开发服务器的配置
        port: 3124,             // 端口
        progress: true,         // 打包时显示进度条
        compress: true          // 启用gzip压缩
    },
    devtool: 'cheap-module-eval-source-map'
};

module.exports = merge(baseConf, conf);

在webpack.pro.config.js中是与生产环境相关的配置内容，比如：

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const merge = require('webpack-merge');
const baseConf = require('./webpack.base.config');

const conf = {
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: ['dist']
        })
    ]
};

module.exports = merge(baseConf, conf);

最后，在package.json文件中在scripts属性中添加脚本：

......

"scripts": {
    "build": "webpack --config ./build/webpack.pro.config.js",
    "start": "webpack-dev-server --config ./build/webpack.dev.config.js"
},

......

这样，运行npm run build就是为生产环境打包，运行npm start就是为开发环境打包。

最后编辑于：2020.05.18 17:01:53