Webpack 插件配置

clean-webpack-plugin

构建的文件名使用了 hash，那么每次构建都会产生不一样的文件，如果构建前不清理的话，那么会不断累计。clean-webpack-plugin 的作用就是构建前清理 output.path 配置的文件夹。

npm i clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};

如果不想清除某些文件，可以使用配置项 cleanOnceBeforeBuildPatterns。

new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ["**/*", "!dll", "!dll/*"]
})

上的配置的作用是：不会清除 dll 文件夹以及 dll 文件夹下的文件。

DllPlugin 及 DllReferencePlugin

这两个插件不需要单独安装，是 Webpack 自带的插件。作用是将不会变动的库（比如 vue、react）拆分出来打包，从而提升构建时的性能。

使用 DllPlugin 需要单独新建一个 Webpack 配置文件。这里取名为 webpack.vendor.config.js

const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        // 第三方库
        vue: ["vue", "vue-router"]
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, "../dist/dll")
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "../dist/dll", "[name].manifest.json")
        })
    ]
};

添加构建命令。

"dll": "webpack --config build/webpack.vendor.config.js",

执行构建后会得到一个 vue.dll.js、vue.manifest.json 文件。

在 webpack.prod.config.js 中使用 DllReferencePlugin 插件来关联 DllPlugin 生成的文件。

new webpack.DllReferencePlugin({
            context: path.resolve(__dirname, "../"),
            manifest: require("../dist/dll/vue.manifest.json")
})

html-webpack-plugin 无法自动引入 DllPlugin 生成的 dll，需要自行引入。可以在 html-webpack-plugin 配置的 template 中写好。有人做了插件 assets-webpack-plugin、add-asset-html-webpack-plugin 来更好的解决这个问题。