12. 区分环境

有些时候,我们需要针对生产环境和开发环境分别书写webpack配置文件,为了更好的适应这种要求,webpack允许配置可以是一个对象,还可以是一个函数

module.exports=env=>{
 return {
     //配置内容
 }
}

在开始构建时,webpack如果发现配置是一个函数,就会调用该函数,将函数的返回值作为配置内容,因此,开发者可以根据不同的环境返回不同的对象

在调用webpack函数的时候,webpack会向函数传入一个参数env,该参数的值来自于webpack命令中给env指定的值,例如

npx webpack --env abc # env:"abc"
npx webpack --env.abc # env:{abc:true}
npx webpack --env=1 #env:{abc:1}
npx webpack --env.abc=1 --env.bcd=2 # env:{abc:1,bcd:2}

这样一来我们就可在命令中指定环境,在代码中判断,根据华宁返回不同的配置结果

??? 怎么根据不同的配置,打包不同的环境,怎么区分相同配置和通用配置

通过命令行攒底参数,标准的配置方案

paackage.json 脚本配置

 "start": "rm -rf dist && webpack --config webpack.func.config.js --env=pro",

webpack.func.config.js

const basicConfig = require('./webpack.basic.config');
const devConfig = require('./webpack.dev.config');
const proConfig = require('./webpack.pro.config');
module.exports = function (env) {
    if (env === 'pro') { // package.json中命令行传进来的参数
        return {
            ...basicConfig,
            ...proConfig,
        }
    } else {
        return {
            ...basicConfig,
            ...devConfig,
        }
    }
}

webpack.basic.config.js 此配置文件的配置的是开发环境和生产环境公共的配置,此处只是一个demo

const path = require('path');
const MyPlugin = require('./plugins/myPlugin');
const FileListPlugin = require('./plugins/FileListPlugin')
module.exports = {
    entry: {
        index: path.join(__dirname, 'src', 'index'),
        main: path.join(__dirname, 'src', 'main'),
        c: [path.join(__dirname, 'src', 'c'), path.join(__dirname, 'src', 'd')],
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // publicPath: '/dist/',
        // filename: "[name].[chunkhash:5].js",//合并的js规则
        filename: "[name].js",
        chunkFilename: '[name].js'
    },
    // loaders
    module: {
        rules: [
            {
                test: /index\.js/,
                use: [
                    {
                        loader: './loaders/var',
                        options: {
                            changeVar: '变量'
                        }
                    }
                ]
            }, // 规则1 处理变量
            {
                test: /\.js/,
                use: [
                    {
                        loader: './loaders/equal'
                    }
                ]
            } // 规则2 处理等号
        ]
    },
    // plugin
    plugins: [
        new MyPlugin(),
        new FileListPlugin('文件列表5.txt')
    ],
}

webpack.dev.config.js

module.exports = {
    mode: 'development',
    devtool: 'source-map',
}

webpack.pro.config

module.exports = {
    mode: "production"
}