在引入一些第三方模块时，如jq等，我们知道其内部肯定不会依赖其他模块，因为我们用到的只是一个单独的js或者css文件，所以此时如果webpack再去解析他们的内部依赖关系，其实是非常浪费时间的，就需要阻止webpack浪费精力去解析这些明知道没有依赖的库，可以在webpack的配置文件的module节点下加上noParse，并配置正则来确定不需要解析依赖关系的模块
module:{ noParse: /jquery|bootstrap/ // jquery|bootstrap 之间不能加空格变成 jquery | bootstrap， 会无效 } 5.IgnorePlugin在引入一些第三方模块时，例如momentJS、dayJS，其内部会做i18n处理，所以会包含很多语言包，而语言包打包时会比较占用空间，如果项目只需要用到中文或者少数语言，可以忽略掉所有的语言包，然后按需引入语言包，从而使得构建效率更高，打包生成的文件更小
以moment为例
import moment from 'moment' moment.locale('zh-CN') // 设置为中文 console.log(moment().subtract(6, 'days').calendar())
首先要找到moment依赖的语言包时什么，通过查看moment的源码来分析
function loadLocale(name) { var oldLocale = null; // TODO: Find a better way to register and load all the locales in Node if (!locales[name] && (typeof module !== 'undefined') && module && module.exports) { try { oldLocale = globalLocale._abbr; var aliasedRequire = require; aliasedRequire('./locale/' + name); getSetGlobalLocale(oldLocale); } catch (e) {} } return locales[name]; }通过 aliasedRequire('./locale/' + name) 可以知道momentJS的多语言目录是locale，所有的语言JS文件都在这个目录中
使用IgnorePlugin插件忽略其依赖
将momentJS的多语言目录locale忽略
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
需要使用某些依赖时自行手动引入
忽略其依赖之后，moment.locale('zh-CN')就会失效，因为其所依赖的语言包全都被忽略了，需要手动将其引入
import moment from 'moment' import 'moment/locale/zh-cn' // 需要手动引入方可生效 moment.locale('zh-CN') console.log(moment().subtract(6, 'days').calendar()) 6.DLLPlugin在引入一些第三方模块时，例如Vue、React等，这些框架的文件一般都是不会修改的，而每次打包都需要去解析他们，也会影响打包速度，就算是做了拆分，也只是提高了上线后的用户访问速度，并不会提高构建速度，所以如果需要提高构建速度，应该使用动态链接库的方式，类似windows的dll文件
借助DLLPlugin插件实现将这些框架作为一个个的动态链接库，只构建一次，以后的每次构建都只会生成自己的业务代码，可以很好的提高构建效率
猪哟思想在于，讲一些不做修改的依赖文件，提前打包，这样我们开发代码发布的时候就不需要再对这些代码进行打包，从而节省了打包时间，主要使用两个插件: DLLPlugin和DLLReferencePlugin
需要注意的是，若是使用的DLLPlugin，CleanWebpackPlugin插件会存在冲突，需要移除CleanWebpackPlugin插件
DLLPlugin
使用一个单独webpack配置创建一个dll文件，并且它还创建一个manifest.json，DLLReferencePlugin使用该json文件来做映射依赖性，这个文件会告诉webpack哪些文件已经提取打包好了
配置参数
context(可选):manifest文件中请求的上下文，默认为该webpack文件上下文
name:公开的dll函数的名称，和output.library保持一致即可
path:manifest.json 生成的文件夹及名称
DLLReferencePlugin
该插件主要用于主webpack配置，它引用的dll需要预先构建的依赖该系
配置参数
context: manifest文件中的请求上下文
manifest: DLLPlugin插件生成的manifest.json
content(可选): 请求的映射模块id(默认为manifest.content)
name(可选): dll暴露的名称
scope(可选): 前缀用于访问dll的文件
sourceType(可选): dll是如何暴露(libraryTarget)
将VUE项目中的库抽取成DLL准备一份将VUE打包成DLL的webpack配置文件。
在build目录下新建一个文件webpack.vue.js，专门用于打包vue的DLL的。
配置入口：将多个要做成dll的库全放进来
配置出口：一定要设置library属性，将打包好的结果暴露在全局
配置plugin：设置打包后dll文件名和manifest文件所在地
// 此配置文件 是打包VUE全家桶的 const path = require('path') const webpack = require('webpack') module.exports = { mode: 'production', entry:{ vue: [ 'vue/dist/vue', 'vue-router' ] }, output:{ path: path.resolve(__dirname, '../dist'), filename: '[name]_dll.js', library: '[name]_dll' // 最终会在全局暴露出一个[name]_dll的对象 }, plugins:[ new webpack.DllPlugin({ name: '[name]_dll', path: path.resolve(__dirname, '../dist/manifest.json'), }) ] }