webpack实用小功能

上一次分享了vue2-webpack3，大多都是一些基础的内容，本期继续分享一些webpack比较实用的功能

1.overlay

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

devServer: {
    overlay: {
        errors: true,
        warnings: true
    }
}
复制代码

配置很简单，那它的做用是什么呢？overlay的做用是能够在浏览器打开的页面显示终端编译时产生的错误。经过配置该属性，之后在写代码的时候，编译若是出错了，咱们就不须要打开终端看究竟是什么报错了，能够直接在页面里看到错误，对于开发而言确实很方便。

2.require.ensure

相比较overlay，require.ensure能够的做用更加实用，上次讲的vue2-webpack3咱们配置的是多页面的应用，可是若是是SPA应用呢？
咱们最容易遇到的问题代码所有打包在一个js里面，致使这个js过于庞大，最终致使应用首次加载时等待时间过长，那么该怎么解决这个问题呢？require.ensure就是专门用来解决这个问题的。

该怎么使用？

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

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的插件，它的主要做用是用来分析咱们模块打包的资源状况，很是的直观，也很是的实用，下面咱们先看下它的效果图：

那么该如何配置呢？ 首先你得先install，而后配置以下：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins = [
    new BundleAnalyzerPlugin({
	  	// Can be `server`, `static` or `disabled`.
	  	// In `server` mode analyzer will start HTTP server to show bundle report.
	  	// In `static` mode single HTML file with bundle report will be generated.
	  	// In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
	  	analyzerMode: 'server',
	  	// Host that will be used in `server` mode to start HTTP server.
	  	analyzerHost: '127.0.0.1',
	  	// Port that will be used in `server` mode to start HTTP server.
	  	analyzerPort: 8888,
	  	// Path to bundle report file that will be generated in `static` mode.
	  	// Relative to bundles output directory.
	  	reportFilename: 'report.html',
	  	// Module sizes to show in report by default.
	  	// Should be one of `stat`, `parsed` or `gzip`.
	  	// See "Definitions" section for more information.
	  	defaultSizes: 'parsed',
	  	// Automatically open report in default browser
	  	openAnalyzer: true,
	  	// If `true`, Webpack Stats JSON file will be generated in bundles output directory
	  	generateStatsFile: false,
	  	// Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
	  	// Relative to bundles output directory.
	  	statsFilename: 'stats.json',
	  	// Options for `stats.toJson()` method.
	  	// For example you can exclude sources of your modules from stats file with `source: false` option.
	  	// See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
	  	statsOptions: null,
	  	// Log level. Can be 'info', 'warn', 'error' or 'silent'.
	  	logLevel: 'info'
	})
]
复制代码

是否是很简单却很实用呢~

4.DllPlugin+DllReferencePlugin

在使用webpack开发的过程当中，相信不少人都会以为有时候项目启动编译时间等待过久了，为何呢？由于当项目慢慢庞大起来的时候，咱们依赖的模块愈来愈多，每次项目启动编译都须要所有编译打包，因此天然会致使编译时间偏长，那如何解决这个问题呢？
首先思路是这样的，通常node_modules文件中的依赖，基本上是不会去作改变的，因此没有必要每次都去进行打包，咱们彻底能够将这些依赖提早打包好，而后就能够一直使用了。
DllPlugin就是用来提早打包咱们的依赖包的插件。DllPlugin分为两个插件，一个是DllPlugin，另外一个是DllReferencePlugin。

首先DllPlugin的做用是用来提早打包好依赖，步骤以下：

1. 新建一个vendor.js，用来引入全部咱们依赖的模块：

import Vue from 'vue';
import ElementUI from 'element-ui';
import VouRouter from 'vue-router';
复制代码

2. 新建一个webpack.config.dll.js的配置文件，配置以下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        vendor: [path.resolve(__dirname, 'vendor')]
    },
    output: {
        path: path.resolve(__dirname, './dll'),
		filename: 'dll.[name].js',
		library: '[name]'
    },
    plugins: [
		new webpack.DllPlugin({
			path: path.join(__dirname, "./dll", "[name]-manifest.json"),
			name: "[name]"
		})
	],
	resolve: {
		extensions: ['js']
	}
复制代码

3. 配置好了之后，就能够到终端里运行webpack --config webpack.config.dll.js了，而后就能在你的dist/dll目录下看到一个dll.vendore.js和一个vendor-manifest.json文件，到此DllPlugin提取依赖的做用就完成了。

下面是DllReferencePlugin的配置，这个配置更简单，找到项目本来的webpack.config.js文件，而后配置以下：

module.exports = {
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.join(__dirname, "src"),
            manifest: require("./dll/vendor-manifest.json")
        })
    ]
}
复制代码

这样就都配置好了，可是这样作还存在个问题，当你运行项目时，会提示：

You are using the runtime-only build of Vue...
复制代码

大概的意思就是说由于你使用了vue的template，使用的vue版本不对，因此我在webpack.config.dll.js里面对vue作以下设置：

alias: {
	'vue$': 'vue/dist/vue.common.js'
}
复制代码

不然会默认打包vue.runtime.common.js，正确的应该是打包vue.common.js这个文件。作了以上配置之后，本觉得就OK了，但仍是太天真，依旧仍是报了同样的错误。 而后我到webpack.config.js里面作了一样的配置，结果就OK了。可是这会致使vue被打包了两份，因此暂时只能放弃在vendor内引入vue了，致使该问题的缘由暂不明了。欢迎你们找到缘由后分享一下~