两种填充方式

1. 填充 1——json 原生

module.exports = {
    entry: {
        index: [
            "./src/index.js"
        ]
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "/",
        filename: "[name].[chunkhash].js",
        chunkFilename: "chunks/[name].[chunkhash].js"
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
            assets: path.resolve(__dirname, "src/assets")）
        }
    },
    module: {
        rules: [
            {
                test: /\.(m?js|jsx|ts|tsx)$/,
                include: [
                    path.resolve(__dirname,  "src")
                ],
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env"
                            ]
                        }
                    }
                ]
            }
            //这里面引入各种loader作为数组项
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./src/index.html"),
            minify: {
                collapseWhitespace: true,
                minifyJS: true,
                minifyCSS: true,
                removeComments: true,
                useShortDoctype: true
            }
        })
        //这里引入各种plugin作为数组项
    ],
    devServer: {
        path: "/dist/",
        port: 3000,
        open: true,
        contentBase: path.resolve(__dirname, "./dist"),
        proxy: {
            "/v1": {
                target: "https://api.dev.myhost.com",
                changeOrigin: true
            }
        }
    }
}

2. 填充 2——chain

需要提前安装 chain 包

npm i -D webpack-chain

import Config from "webpack-chain";
const config = new Config();

//以下均等价于之前的json配置

config.entry("index").add("./src/index.js")

config.output
    .path(path.resolve(__dirname, "./dist"))
    .publicPath("/")
    .filename("[name].[chunkhash].js")
    .chunkFilename("chunks/[name].[chunkhash].js")

config.resolve.alias
    .set("@", path.resolve(__dirname, "src"))
    .set("assets", path.resolve(__dirname, "src/assets"))

config.module
    .rule("babel")
    .test(/\.(m?js|jsx|ts|tsx)$/)
    .include
        .add(path.resolve(__dirname,  "src"))
        .end()
    .use("babel-loader")
        .loader("babel-loader")
        .options({
            "presets":["@babel/preset-env"]
        })

config.plugin("HtmlWebpackPlugin").use(HtmlWebpackPlugin, [
    {
        template: path.resolve(__dirname, "./src/index.html"),
        minify: {
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true,
            removeComments: true,
            useShortDoctype: true
        }
    }
]);

config.when(process.env.NODE_ENV === "development", config => {
    config.devServer
        .path("/dist/")
        .port(3000)
        .open(true)
        .contentBase(path.resolve(__dirname, "./dist")).
        .proxy({
            "/v1": {
                target: "https://api.dev.myhost.com",
                changeOrigin: true
            }
    })
});

module.exports = config.toConfig();

• 可转换为 json 检查配置

  config.toString();
  

3. 使用 chain 的好处

tap 方法

• 灵活地进行 loader 的修改

  config.module
    .rule("babel")
    .use("babel-loader")
    .tap((options) => {
      // 进行选项的修改
      options.include = path.resolve(__dirname, "test");
      return options;
    });
  

• 灵活地进行 plugin 的修改

  config.plugin("HtmlWebpackPlugin").tap((args) => [
    {
      ...(args[0] || {}),
      template: path.resolve(__dirname, "./main.html"),
    },
  ]);
  

when 方法

• 可以按条件进行配置

  config.when(process.env.NODE_ENV === "production", (config) => {
    config.plugin("minify").use(BabiliWebpackPlugin);
  });
  

  • 仅在生产环境添加 minify 插件

  config.when(
    process.env.NODE_ENV === "production",
    (config) => config.plugin("minify").use(BabiliWebpackPlugin),
    (config) => config.devtool("source-map"),
  );
  

  • 仅在生产环境添加 minify 插件，非生产环境添加 source-map 映射

clear 方法

• 移除原先的所有入口

  config.entryPoints.clear();
  

• 移除所有 loader

  config.module.rules.clear();
  

• 灵活地移除某个规则下的所有 loader

  config.module.rule("babel").uses.clear();
  

• 灵活地移除某个 plugin

  config.plugins.delete("HtmlWebpackPlugin");