4 Webpack中的配置-配置类型

Webpack中的配置

对于Webpack的使用者来说，Webpack的构建结果完全取决于使用者编写的配置。Webpack的构建完全依赖于相关的配置，熟练编写和掌握Webpack的相关配置，是学好和用好Webpack最重要的一环。本章节将会对Webpack中常用的配置选项进行阐述。

多种配置类型

Webpack执行构建的时候需要导出相关的配置信息，作为参数传入，然后根据配置信息进行构建。配置信息具有多种类型。

导出一个单个配置对象

Webpack的配置文件使用Common2.js模块规范导出一个包含构建信息的对象：

module.exports = {
    
    
    mode: "production",
    entry: './src/index.js',
    output: {
    
    
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

导出一个函数

允许导出一个返回值为配置信息对象的函数，此方式结合Webpack中相关的命令行参数，可以消除不同环境下的构建差异：

const path = require("path");
const pathResolve = (src) => path.resolve(src);

module.exports = function (env, argv) {
    
    
    const isProd = env === 'prod';
    return {
    
    
        mode: isProd ? 'production' : 'development',
        entry: './src/index.js',
        output: {
    
    
            filename: isProd ? 'main.prod.js' : 'main.dev.js',
            path: isProd ? pathResolve('prod') : pathResolve('dev')
        }
    }
}

根据env环境信息的值，我们可以控制Webpack的构建过程和结果。在此之前需要在package.json中的scripts字段中写入如下内容：

{
    
    
    "scripts": {
    
    
        "build:prod": "webpack --env prod --config webpack.config.func.js",
        "build:dev": "webpack --env dev --config webpack.config.func.js"
    }
}

–env设置环境信息，–config表示Webpack使用指定文件中导出的构建信息。

导出一个Promise

相关配置信息需要异步加载的时候，可以选择导出一个Promise：

const path = require("path");

module.exports = () =>
    new Promise((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
            resolve({
    
    
                entry: './src/index.js',
                output: {
    
    
                    filename: 'main.promise.js',
                    path: path.resolve(__dirname, 'promise')
                }
            })
        }, 5000)
    })

导出多个配置对象

Webpack支持多个配置对象的导出，每一个配置对象都会进行对应的构建。例如，导出多个配置对象，将项目进行多种模块规范下的构建：

const path = require("path");

module.exports = [
    {
    
    
        entry: './src/index.js',
        output: {
    
    
            filename: 'main-amd.js',
            path: path.resolve(__dirname, 'arr'),
            libraryTarget: 'amd'
        },
    },
    {
    
    
        entry: './src/index.js',
        output: {
    
    
            filename: 'main-commonjs.js',
            path: path.resolve(__dirname, 'arr'),
            libraryTarget: 'commonjs'
        },
    }
];

这里使用LibraryTarget指定对应的模块化规范，进行打包构建。
本章节提供案例源码下载：https://gitee.com/mvc_ydb/webpack/blob/master/webpack%E5%A4%9A%E7%A7%8D%E9%85%8D%E7%BD%AE%E7%B1%BB%E5%9E%8B.zip。