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。