從零開始的webpack生活-0x008：DLL加速編譯

ityouknow 發布于2019-08-21 17:29 / 727人閱讀

摘要：概述上一章講的是，和這一章依舊沒有絲毫關系，這一章講的是和。插件介紹這個插件啊，用來預打包一些第三方庫，因為他們不經常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費了調試編譯的時間，還浪費了時間。

0x001 概述

上一章講的是CommonChunkPlugin，和這一章依舊沒有絲毫關系，這一章講的是DllPlugin和DllReferencePlugin。

0x002 插件介紹

這個插件啊，用來預打包一些第三方庫，因為他們不經常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費了調試編譯的時間，還浪費了....時間。

0x003 栗子又來了

初始化項目

$ midkir 0x007-dll
$ cd 0x007-dll
$ cnpm init -y
$ cnpm install angular lodash jquery

這次需要兩個配置文件，一個用于打包dll，一個用于打包dll-user，先配置用來打包dll的webpack.dll.config.js

$ vim ./webpack.dll.config.js
// ./webpack.dll.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: {
        vendor: ["angular", "jquery","lodash"]// 用這三個庫打包成dll做測試
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].dll.js",
        library: "[name]_library"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "dist", "[name]-manifest.json"),
            name: "[name]_library" // 需要與output.library相同
        })
    ]
};

打包dll，將會在./dist目錄下生成vendor-minifest.json、vendor.dll.js

$ webpack --config webpack.dll.config.js

配置dll-user

$ vim ./webpack.config.js
# ./webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry: {
        "dll-user": ["./src/index.js"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },

    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./dist/vendor-manifest.json")
        })
    ]

};

添加入口文件

$ vim ./src/index.js
// ./src/index.js
var angular = require("angular");
console.log(angular);

打包dll-user

$ webpack 
Hash: 1aa3feec9d1827de7d5a
Version: webpack 3.8.1
Time: 70ms
             Asset     Size  Chunks             Chunk Names
dll-user.bundle.js  2.88 kB       0  [emitted]  dll-user
   [0] multi ./src/index.js 28 bytes {0} [built]
   [2] ./src/index.js 56 bytes {0} [built]
   // 注意這行 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   [3] delegated ./node_modules/_angular@1.6.6@angular/index.js from dll-reference vendor_library 42 bytes {0} [built]
    + 1 hidden module

注意：這里我們引用了angular但是在打包完的index.js中，并不存在angular，因為我們通過引用dll來引入angular，在打包的信息輸出中，對于angular的處理也變成了delegated,

更多詳細信息，請查看webpack關于DllPlugin章節

0x004 資源

源代碼

云服務器 GPU云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89583.html

從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

摘要：概述上一章講的是，這一章講的是依舊是沒有任何關系。配合插件自動插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請查閱關于章節資源源代碼 0x001 概述上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關系。 0x002 插件介紹這個插件用來將css導出到單獨文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 評論0 收藏0
從零開始的webpack生活-0x009：FilesLoader裝載文件

摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結尾的文件，都將使用這個來處理命中后使用的加載器查看結果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護和美觀更多配置，可以查閱關于部分。 0x001 概述上一章講的是DLL加速編譯，這一章開始講loader相關的部分，但是關于plugin的部分善未完結，因為即將要講的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x011：StylingLoader裝載樣式

0x001 概述上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x016：OtherPlugin其他常用

摘要：概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件和上一章是沒有任何關系。環境搭建定義環境插件介紹這個插件用來定義環境變量的，直接定義在了下。安裝依賴添加資源修改配置打包其他更多配置請查閱關于資源源代碼 0x001 概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件,和上一章是沒有任何關系。 0x002 環境搭建 $ mkdir 0x0016-other-plug...

chinafgj 2019-08-21 17:36 評論0 收藏0