webpack实用小功能介绍

1.overlay

overlay属于devServer的属性，配置案例如下：

?

1 2 3 4 5 6

devServer: {  overlay: {   errors: true,   warnings: true  } }

配置很简单，那它的作用是什么呢？overlay的作用是可以在浏览器打开的页面显示终端编译时产生的错误。通过配置该属性，以后在写代码的时候，编译如果出错了，我们就不需要打开终端看到底是什么报错了，可以直接在页面里看到错误，对于开发而言确实很方便。

2.require.ensure

相比较overlay，require.ensure可以的作用更加实用，上次讲的vue2-webpack3我们配置的是多页面的应用，但是如果是SPA应用呢？

我们最容易遇到的问题代码全部打包在一个js里面，导致这个js过于庞大，最终导致应用首次加载时等待时间过长，那么该怎么解决这个问题呢？require.ensure就是专门用来解决这个问题的。

该怎么使用？

使用起来也很简单，只要按照下面的写法来进行vue的router配置即可：

?

1 2 3 4 5 6 7 8 9 10

const Layout = require('../Layout') const Home = r => require.ensure([], () => r(require('../home'), home) export default [{  path: '/',  component: Layout,  children: [{   path: '',  component: Home  }] }]

可以看到require.ensure有三个参数

第一个参数的作用是配置依赖列表，被依赖的模块会和当前模块打包到一起； 第二个参数是一个函数，将要单独打包的模块传入回调里； 第三个参数是chunkname，可用来配置js的文件名； 配置完了以后，当我们加载这个页面的时候，属于每个页面自己的代码部分，就会单独去加载了。

3.webpack-bundle-analyzer

这是一个webpack的插件，它的主要作用是用来分析我们模块打包的资源情况，非常的直观，也非常的实用

4.DllPlugin+DllReferencePlugin

在使用webpack开发的过程中，相信很多人都会觉得有时候项目启动编译时间等待太久了，为什么呢？因为当项目慢慢庞大起来的时候，我们依赖的模块越来越多，每次项目启动编译都需要全部编译打包，所以自然会导致编译时间偏长，那如何解决这个问题呢？

首先思路是这样的，一般node_modules文件中的依赖，基本上是不会去做改变的，所以没有必要每次都去进行打包，我们完全可以将这些依赖提前打包好，然后就可以一直使用了。

DllPlugin就是用来提前打包我们的依赖包的插件。DllPlugin分为两个插件，一个是DllPlugin，另一个是DllReferencePlugin。