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 保持一致。