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了，致使該問題的緣由暫不明瞭。歡迎你們找到緣由後分享一下~