webpack實用小功能介紹
上一次分享了vue2-webpack3,大多都是一些基礎(chǔ)的內(nèi)容,本期繼續(xù)分享一些webpack比較實用的功能
1.overlay
overlay屬于devServer的屬性,配置案例如下:
devServer: {
overlay: {
errors: true,
warnings: true
}
}
配置很簡單,那它的作用是什么呢?overlay的作用是可以在瀏覽器打開的頁面顯示終端編譯時產(chǎn)生的錯誤。通過配置該屬性,以后在寫代碼的時候,編譯如果出錯了,我們就不需要打開終端看到底是什么報錯了,可以直接在頁面里看到錯誤,對于開發(fā)而言確實很方便。
2.require.ensure
相比較overlay,require.ensure可以的作用更加實用,上次講的vue2-webpack3我們配置的是多頁面的應(yīng)用,但是如果是SPA應(yīng)用呢?
我們最容易遇到的問題代碼全部打包在一個js里面,導(dǎo)致這個js過于龐大,最終導(dǎo)致應(yīng)用首次加載時等待時間過長,那么該怎么解決這個問題呢?require.ensure就是專門用來解決這個問題的。
該怎么使用?
使用起來也很簡單,只要按照下面的寫法來進(jìn)行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有三個參數(shù)
第一個參數(shù)的作用是配置依賴列表,被依賴的模塊會和當(dāng)前模塊打包到一起; 第二個參數(shù)是一個函數(shù),將要單獨打包的模塊傳入回調(diào)里; 第三個參數(shù)是chunkname,可用來配置js的文件名; 配置完了以后,當(dāng)我們加載這個頁面的時候,屬于每個頁面自己的代碼部分,就會單獨去加載了。
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開發(fā)的過程中,相信很多人都會覺得有時候項目啟動編譯時間等待太久了,為什么呢?因為當(dāng)項目慢慢龐大起來的時候,我們依賴的模塊越來越多,每次項目啟動編譯都需要全部編譯打包,所以自然會導(dǎo)致編譯時間偏長,那如何解決這個問題呢?
首先思路是這樣的,一般node_modules文件中的依賴,基本上是不會去做改變的,所以沒有必要每次都去進(jìn)行打包,我們完全可以將這些依賴提前打包好,然后就可以一直使用了。
DllPlugin就是用來提前打包我們的依賴包的插件。DllPlugin分為兩個插件,一個是DllPlugin,另一個是DllReferencePlugin。
首先DllPlugin的作用是用來提前打包好依賴,步驟如下:
新建一個vendor.js,用來引入所有我們依賴的模塊:
import Vue from 'vue'; import ElementUI from 'element-ui'; import VouRouter from 'vue-router';
新建一個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']
}
配置好了以后,就可以到終端里運行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")
})
]
}
這樣就都配置好了,但是這樣做還存在個問題,當(dāng)你運行項目時,會提示:
You are using the runtime-only build of Vue...
大概的意思就是說因為你使用了vue的template,使用的vue版本不對,所以我在webpack.config.dll.js里面對vue做如下設(shè)置:
alias: {
'vue$': 'vue/dist/vue.common.js'
}
否則會默認(rèn)打包vue.runtime.common.js,正確的應(yīng)該是打包vue.common.js這個文件。做了以上配置以后,本以為就OK了,但還是太天真,依舊還是報了一樣的錯誤。
然后我到webpack.config.js里面做了同樣的配置,結(jié)果就OK了。但是這會導(dǎo)致vue被打包了兩份,所以暫時只能放棄在vendor內(nèi)引入vue了,導(dǎo)致該問題的原因暫不明了。
相關(guān)文章
js檢測離開或刷新頁面時表單數(shù)據(jù)是否更改的方法
這篇文章主要介紹了js檢測離開或刷新頁面時表單數(shù)據(jù)是否更改的方法,涉及javascript表單操作及事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2016-08-08
基于JavaScript實現(xiàn)手機短信按鈕倒計時(超簡單)
在淘寶等購物網(wǎng)站,我們都會看到一個發(fā)送短信倒計時的按鈕,究竟是如何實現(xiàn)的呢?下面小編通過本篇文章給大家分享一段代碼關(guān)于js實現(xiàn)手機短信按鈕倒計時,需要的朋友參考下2015-12-12
跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式,對javascript嚴(yán)格模式進(jìn)行概述,進(jìn)入嚴(yán)格模式的方法,以及如何調(diào)用和相關(guān)語法,感興趣的小伙伴們可以參考一下2015-11-11
Javascript 實現(xiàn)復(fù)制(Copy)動作方法大全
現(xiàn)在瀏覽器種類也越來越多,諸如 IE、Firefox、Chrome、Safari等等,因此現(xiàn)在要實現(xiàn)一個js復(fù)制內(nèi)容到剪貼板的小功能就不是一件那么容易的事了。2014-06-06

