摘要：今天就來(lái)簡(jiǎn)單講講它們的使用。這個(gè)插件的作用是創(chuàng)建文件和文件。使用其他的腳手架需要根據(jù)具體情況考慮。不要使用，否則在運(yùn)行時(shí)會(huì)報(bào)錯(cuò)誤。的和的要保持一致。

這段時(shí)間在對(duì)公司的打包構(gòu)建速度和app.js文件大小進(jìn)行優(yōu)化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就來(lái)簡(jiǎn)單講講它們的使用。

其實(shí)對(duì)于這兩個(gè)插件網(wǎng)上已經(jīng)有很多各種各樣的文章了。不過(guò)筆者認(rèn)為，那些文章都寫(xiě)得很棒，但是對(duì)于部分需要注意的地方都沒(méi)有說(shuō)明。這里筆者就根據(jù)自己的理解講講個(gè)人的理解。如果有什么不對(duì)的地方希望能有人指出，小弟在此先謝過(guò)了。

首先我們來(lái)講講DLLPlugin這個(gè)插件吧。這個(gè)插件的作用是創(chuàng)建dll文件和manifest文件。dll文件就是就是我們需要引入的文件，manifest文件是引導(dǎo)webpack引入到當(dāng)前項(xiàng)目的文件。好吧，直接貼代碼：

webpack.dll.conf.js

var path = require("path")

var webpack = require("webpack")
var CleanWebpackPlugin = require("clean-webpack-plugin")

var config = require("../config")
var __root = xxx // 這里是你的根路徑
// 這里是靜態(tài)資源路徑，如果使用vue-cli的，就是根目錄下的static目錄；
// 如果使用@vue/cli的就是根目錄下的public目錄。使用其他的腳手架需要根據(jù)具體情況考慮。
var static = xxx 

module.exports = {
    context: __root, // 這里配置的context就是后面dll的context
    entry: {
        "core": ["vue", "vue-router", "vuex"],
        "asset": ["axios", "fastclick"]
    },
    output: {
        path: path.resolve(static, "lib"),
        filename: "[name]-[chunkhash:7].dll.js",
        library: "lib_[name]",
        // *** 這里不要添加libraryTarget，否則webpack打包時(shí)會(huì)出錯(cuò)。
        // （提示是__WEBPACK__EXTERNAL__MODULE__xxx未定義） ***
        // libraryTarget: "umd"
    },
    resolve: {
        modules: [path.resolve(__root, "node_modules")],
        extensions: [".js", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    // 這里沒(méi)有寫(xiě)loaders，如果有需要可以自行添加loaders
    plugins: [
        // *** 這里很關(guān)鍵 ***
        new webpack.DllPlugin({ // 因?yàn)樯厦鎸?xiě)了context，所以這里可以不指定context
            // 這里manifest的名字必須要有變量，因?yàn)轭?lèi)似上面的core和asset會(huì)分別創(chuàng)建一個(gè)manifest，
            // 如果名稱(chēng)相同，manifest會(huì)生成不規(guī)范的json，在引用時(shí)會(huì)報(bào)錯(cuò)。
            path: path.resolve(__root, "static/manifest/[name].manifest.json"),
            name: "lib_[name]" // *** 這里的名字必須與output.library一致 ***
        }),
        // 這個(gè)是用來(lái)穩(wěn)定hash值，防止出現(xiàn)webpack的hash出現(xiàn)莫名的變化
        new webpack.HashedModuleIdsPlugin(),
        new webpack.NamedChunksPlugin()
        ... 其他插件
    ]
}

上面就是webpack.dll.conf.js的主要配置。執(zhí)行之后會(huì)在static文件夾（在vue-cli生成的項(xiàng)目中用于存放不需要webpack構(gòu)建的靜態(tài)文件【@vue/cli中的目錄名為Public】）下生成兩個(gè)文件夾（lib文件夾和mainfest文件夾）。其中l(wèi)ib下的文件為我們已經(jīng)打包好的組件庫(kù)，mainfest下的文件在引入項(xiàng)目時(shí)有用（是一個(gè)JSON文件）。

webpack.conf.js

var path = require("path")

// 獲取dll文件的manifest
function getDllManifest () {
    var plugins = []
    Object.keys({
        "core": ["vue", "vue-router", "vuex"],
        "asset": ["axios", "fastclick"]
    }).forEach((name) => {
        plugins.push(
            new webpack.DllReferencePlugin({
                context: __root, // 這里的context必須與DllPlugin中的context保持一致
                manifest: path.resolve(__root, "static/manifest/[name].manifest.json").replace(/[name]/gi, name)
            })
        )
    })
    return plugins
}

module.exports = {
    entry: {
        app: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "..")
        filename: "js/[name]js"
    },
    ... 其他代碼
    plugins: [
        // *** 所以這里可能會(huì)引入多個(gè)DllReferencePlugin，具體要看有幾個(gè)manifest文件了。***
        ...getDllManifest(),
        new HtmlWebpackPlugin({
            filename: utils.assetsPath("page/retail.html"),
            template: path.join(config.dev.page, "retail.html"),
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: "dependency"
        }),

        // dll文件需要插件將其引入到html文件中，以方便后續(xù)使用
        new HTMLWebpackIncludeAssetsPlugin({
            append: false,
            publicPath: config.build.assetsPublicPath,
            assets: [{
                path: config.build.assetsSubDirectory,
                glob: "**/*.js",
                globPath: config.dll.static
            }],
        }),

        // 將dll文件拷貝到你的dist目錄下
        new CopyWebpackPlugin([
            {
                // 這里是dll文件當(dāng)前所在的文件目錄
                from: static,
                // 這里是生產(chǎn)環(huán)境的資源地址
                to: config.build.assetsSubDirectory,
                // 過(guò)濾static中的部分文件
                ignore: [".*", "manifest/*"]
            }
        ])
    ]
}

getDllManifest方法是將打包好的庫(kù)引入到項(xiàng)目中（就是在html中生成script標(biāo)簽的方式引入，它會(huì)在app.js之前生成，保證代碼執(zhí)行順序的正確性），并保證構(gòu)建工具不會(huì)再次對(duì)它進(jìn)行打包。以上就是生成和引用dll文件的配置。

注：

output.library必須與DllPlugin配置中的name字段保持統(tǒng)一。

不要使用libraryTarget，否則在運(yùn)行時(shí)會(huì)報(bào)__WEBPACK__EXTERNAL__MODULE__xxx is not defined錯(cuò)誤。

DllPlugin的context和DllReferencePlugin的context要保持一致。

manifest的名字最好是可配置的，這樣方便生成多個(gè)dll文件。

如果有多個(gè)dll文件，需要添加多個(gè)DllReferencePlugin插件去分別處理。

講webpack構(gòu)建優(yōu)化的