webpack源码解析六（webpack-chain）

前言

前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：

• webpack源码解析一
• webpack源码解析二（html-webpack-plugin插件）
• webpack源码解析三
• webpack源码解析四
• webpack源码解析五

今天我们说一下一个关于webpack配置的第三方库webpack-chain,为什么要讲它呢？ 可以借助IDE可以做到智能提示，让我们配置起来不容易出错，而且完全链式语法，用起来比较爽！

开始

我们还是接着我们之前章节的webpack-demo继续，webpack-chain的api用法大家可以简单的先过一下官网，然后看一下我们之前webpack-demo的配置文件，

webpack.config.js：

const path = require("path");
module.exports = {
   
    mode: "development",
    context: path.resolve(__dirname, "./src"),
    // entry: ["babel-polyfill","./index.js"],
    entry: {
   
        app: ["./index.js"]
    },
    output: {
   
        path: path.join(process.cwd(), "lib"), //默认为path.join(process.cwd(), "dist")
        pathinfo: true,
        filename: "[name].[contenthash:16].[fullhash:16].[id].js",
        chunkFilename: "[id].js",
        // library: "demoSay",
        // libraryExport: "default",
        // libraryTarget: "jsonp",

    },
    experiments: {
   
        // outputModule: true
    },
    module: {
   
        noParse: /babel-polyfill/,
        rules: [
            {
   
                test: /.vue$/,
                use: 'vue-loader',
            },
            {
   
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
   
                        loader: "postcss-loader",
                        options: {
   
                            config: {
   
                                path: path.resolve(__dirname, "./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ],
            },
            {
   
                test: /\.png$/,
                oneOf: [
                    {
   
                        resourceQuery: /inline/,
                        loader: "url-loader",
                        options: {
   
                            limit: 1024 * 1024 * 10
                        }
                    },
                    {
   
                        resourceQuery: /external/,
                        loader: "file-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
   
        alias: {
   
            DemoVue: path.resolve(__dirname, "./src/demo-vue.vue")
        },
        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'],
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        unsafeCache: /demo-publicpath/,
    },
    plugins: [
        new (require("vue-loader-plugin"))(),
        // new (require("uglifyjs-webpack-plugin"))({
   
        //     test: /\.js($|\?)/i
        // })
    ],
    devServer: {
   
        before(app, server, compiler) {
   
            app.get("/login",(req,res,next)=>{
   
                req.query.name="hello "+req.query.name;
                next();
            });
        },
        after(app, server, compiler) {
   
            app.get("/login",(req,res,next)=>{
   
                res.json({
   msg: req.query.name});
            });
        },
        clientLogLevel: "info",
        allowedHosts: [
            "localhost"
        ],
        contentBase: path.join(process.cwd(), "lib"),
        // contentBasePublicPath: "/assets",
        filename: /app\.js/,
        headers: {
   
            'X-Custom-Foo': 'bar'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        port: "8090",
        hot: true,
        liveReload: true,
        open: true,
        useLocalIp: true,
        overlay: true,
    },
    // performance: {
   
    //     hints: "error",
    //     maxEntrypointSize: 1024
    // }
};

👌，这个配置文件我就不分析太多了，因为我是直接用的之前demo的配置文件，不懂的小伙伴可以看看之前的章节。

安装

首先在demo根目录安装webpack-chain：

npm install -D webpack-chain || yarn add -D webpack-chain

配置

我们在demo根目录创建一个webpack-chain.js的文件，先导出一个config对象：

webpack-chain.js

const Config = require('webpack-chain');
const config = new Config();

module.exports = config.toConfig();

我们new了一个webpack-chain的config对象，然后利用toConfig方法是把webpack-chain的config对象转换成webpack的配置对象的方法。

mode

可以看到，当我们用mode方法的时候，IDE直接提示我们value的值有哪些了，是不是很方便呢？

ok！ 我们这里用的是“development”，所以我们直接设置mode的值为“development”（小伙伴可以像我一样，用ide分两屏一左一右对照的来写一遍）。

const Config = require('webpack-chain');
const config = new Config();

config
    .mode("development")

module.exports = config.toConfig();

context

可以看到，ide提示我们输出一个string字符串：

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("development")
    .context(path.resolve(__dirname, "./src"))

module.exports = config.toConfig();

Ok! 后面的内容我就不截图了，直接按照提示配置就ok，我就加快节奏了哈～

entry

const Config = require('webpack-chain');
const config = new Config();