webpack 打包第三方库_Webpack 打包第三方代码库

共四篇文章都是在总结 Webpack。其中，[译]为什么要 Webpack 写了使用 Webpack 的动机和它的显著特征。其余三篇，主要是围绕怎么解决 Webpack 构建出来的文件太大展开，分别是：

Webpack 构建后文件变得很大？引入问题和解决问题的四个方面，并且介绍按需加载的细节

Webpack 提取公共模块介绍怎么提取公共模块

本篇则是总结使用 Webpack 打包第三方代码库

代码压缩使用了 UglifyJSPlugin，只是在第二篇一笔代过，这个插件基于 UglifyJS，有许多配置，但我一般都使用默认项，所以不单独写，使用方面可看这篇。

写完这篇就结束本次的 Webpack 总结。

对于极少变动的框架代码，例如 jQuery 或 ReactJs 等，应该怎么打包？

使用 CommonsChunkPlugin，设置 minChunks 为 Infinity 可用于打包此类代码，但缺点也是比较明显的：

每次执行 webpack 时，都会去解析打包这些代码，耗时也耗资源

如果设置了文件名 hash，一次构建生成一个新的hash，那这些文件即使没有变，文件名也会变，不利于缓存。

对于这些代码我是用 Dll 插件单独构建。这篇介绍 Dll 打包方法。

完整的构建过程

webpack 除了打包应用的 JS 外，还可以用来打包一个类库，涉及到 webpack config object 的 output.library, output.libraryTarget。Dll 打包结合这两个属性。

假设项目中使用了 ReactJs，Redux 等等，使用项目完整过程变成如下图：

可见，框架代码 React 与项目源码的构建是分离的。

webpack.config.js:

webpack.dll.js

DllPlugin 和 DllReferencePlugin

用到了两个插件，DllPlugin 和 DllReferencePlugin。DllPlugin 用于打包框架代码 React，而 DllReferencePlugin 用于引入 DllPlugin 生成的代码，供我们的项目使用。

DllPlugin 的配置项只有三个，具体含义见截图里的注释

DllReference 的配置项较多，但最重要的是配置 manifest，其它的使用默认的就可以，这样不容易出错。不过也可以理解一下各配置项的含义

context 和 DllPlugin 一样

scope 是设置一个引用的前缀，例如如果设置了 ‘frame’，那么项目代码中 require('frame/react') 就会找 dll 里查找 react 模块

name 和 DllPlugin 一样，默认是 manifest 里的 name 属性

sourceType 是指定这个 Dll 包遵守什么规范，umd，amd，或 var，默认是 var，即是通过 script 标签引入到文档里，这个要跟 webpack.dll.js 里的 output.libraryTarget 保持一致。

webpack 打包第三方库_Webpack 打包第三方代码库相关推荐

webpack打包路径更改_webpack打包教程
创建package.json文件命令:npm init 安装webpack npm install --save-dev webpack npm install --save-dev webpack ...
linux怎么删除代码库,是否有从代码库中删除第三方C和C库的好技巧或工具？ (OS X或Linux)...
我正在减少和隔离我对某些库的使用.我编写的许多现有程序直接使用这些库.我想要编译器(在这种情况下是GCC和/或Clang)或一些工具来帮助我识别我的代码库中的这些用法.简而言之,我想在代码库中毒害这些 ...
webstrom中打包的详细_webpack打包体积优化
webpack webpack打包体积优化 webpack官方定义 webpack 是一个模块打包器.webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使 ...
css3动画源代码库_清理CSS代码库
css3动画源代码库 You have just been onboarded to an existing project to replace a departing developer. Or ...
开源代码库_3个开源代码库来处理MARC格式的记录
开源代码库欢迎回到Nooks&Crannies! 在为我的婚礼休假一个月之后,我一直在为即将到来的专栏挖掘一些有趣的地方. 这个月,我将看一些开放源代码库,开发人员可以使用它们来处理MARC ...
webpack 打包第三方库_webpack打包分离第三方库和业务代码
使用webpack打包工程,通常会需要分离第三方类库和应用本身的代码,因为第三方类库更新频率不高,这样浏览器可以直接从缓存读,不需要项目每次上线再获取一次. 以react为例,正常情况下,最初是这么配 ...
webpack打开项目命令_webpack打包好的页面在项目中怎么运行？
使用webpack打包好了页面和相关的js文件,然后命令输入webpack-dev-server,再浏览器中输入: http://localhost:9090/WebRoot... 打开页面能正常的加 ...
c v语言小数后20位,V语言学习笔记-30集成C代码库
集成C代码库优势 V的代码库很多都直接调用C标准库函数来实现,对C标准库的依赖还是很重的由于V代码编译后生成的是C代码,然后再调用C编译器编译成可执行文件这样的机制决定了V语言可以很方便地调用C ...
ACMMM 2021-多模态宝藏！京东梅涛团队重磅开源第一个适用于多个任务的多模态代码库x-modaler...
关注公众号,发现CV技术之美 0 写在前面过去十年深度学习的发展,极大地推动了多媒体领域视觉与语言之间跨模态分析的进步.然而,目前还没有一个开源的代码库以统一和模块化的方式来支持训练和部署跨模态分析 ...

webpack 打包第三方库_Webpack 打包第三方代码库

webpack 打包第三方库_Webpack 打包第三方代码库相关推荐

最新文章

热门文章