从零开始的webpack生活-0x008：DLL加速编译

ityouknow 发布于2019-08-21 17:29 / 620人阅读

摘要：概述上一章讲的是，和这一章依旧没有丝毫关系，这一章讲的是和。插件介绍这个插件啊，用来预打包一些第三方库，因为他们不经常修改，而每次我们引用他们之后都要将他们不断的打包一次又一次，不但浪费了调试编译的时间，还浪费了时间。

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 资源

源代码

私有云服务器托管从零开始的邮件服务器从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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