webpack實(shí)用小功能介紹
上一次分享了vue2-webpack3,大多都是一些基礎(chǔ)的內(nèi)容,本期繼續(xù)分享一些webpack比較實(shí)用的功能
1.overlay
overlay屬于devServer的屬性,配置案例如下:
devServer: {
overlay: {
errors: true,
warnings: true
}
}
配置很簡(jiǎn)單,那它的作用是什么呢?overlay的作用是可以在瀏覽器打開(kāi)的頁(yè)面顯示終端編譯時(shí)產(chǎn)生的錯(cuò)誤。通過(guò)配置該屬性,以后在寫(xiě)代碼的時(shí)候,編譯如果出錯(cuò)了,我們就不需要打開(kāi)終端看到底是什么報(bào)錯(cuò)了,可以直接在頁(yè)面里看到錯(cuò)誤,對(duì)于開(kāi)發(fā)而言確實(shí)很方便。
2.require.ensure
相比較overlay,require.ensure可以的作用更加實(shí)用,上次講的vue2-webpack3我們配置的是多頁(yè)面的應(yīng)用,但是如果是SPA應(yīng)用呢?
我們最容易遇到的問(wèn)題代碼全部打包在一個(gè)js里面,導(dǎo)致這個(gè)js過(guò)于龐大,最終導(dǎo)致應(yīng)用首次加載時(shí)等待時(shí)間過(guò)長(zhǎng),那么該怎么解決這個(gè)問(wèn)題呢?require.ensure就是專門(mén)用來(lái)解決這個(gè)問(wèn)題的。
該怎么使用?
使用起來(lái)也很簡(jiǎn)單,只要按照下面的寫(xiě)法來(lái)進(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有三個(gè)參數(shù)
第一個(gè)參數(shù)的作用是配置依賴列表,被依賴的模塊會(huì)和當(dāng)前模塊打包到一起; 第二個(gè)參數(shù)是一個(gè)函數(shù),將要單獨(dú)打包的模塊傳入回調(diào)里; 第三個(gè)參數(shù)是chunkname,可用來(lái)配置js的文件名; 配置完了以后,當(dāng)我們加載這個(gè)頁(yè)面的時(shí)候,屬于每個(gè)頁(yè)面自己的代碼部分,就會(huì)單獨(dú)去加載了。
3.webpack-bundle-analyzer
這是一個(gè)webpack的插件,它的主要作用是用來(lái)分析我們模塊打包的資源情況,非常的直觀,也非常的實(shí)用,下面我們先看下它的效果圖:
那么該如何配置呢? 首先你得先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'
})
]
是不是很簡(jiǎn)單卻很實(shí)用呢~
4.DllPlugin+DllReferencePlugin
在使用webpack開(kāi)發(fā)的過(guò)程中,相信很多人都會(huì)覺(jué)得有時(shí)候項(xiàng)目啟動(dòng)編譯時(shí)間等待太久了,為什么呢?因?yàn)楫?dāng)項(xiàng)目慢慢龐大起來(lái)的時(shí)候,我們依賴的模塊越來(lái)越多,每次項(xiàng)目啟動(dòng)編譯都需要全部編譯打包,所以自然會(huì)導(dǎo)致編譯時(shí)間偏長(zhǎng),那如何解決這個(gè)問(wèn)題呢?
首先思路是這樣的,一般node_modules文件中的依賴,基本上是不會(huì)去做改變的,所以沒(méi)有必要每次都去進(jìn)行打包,我們完全可以將這些依賴提前打包好,然后就可以一直使用了。
DllPlugin就是用來(lái)提前打包我們的依賴包的插件。DllPlugin分為兩個(gè)插件,一個(gè)是DllPlugin,另一個(gè)是DllReferencePlugin。
首先DllPlugin的作用是用來(lái)提前打包好依賴,步驟如下:
新建一個(gè)vendor.js,用來(lái)引入所有我們依賴的模塊:
import Vue from 'vue'; import ElementUI from 'element-ui'; import VouRouter from 'vue-router';
新建一個(gè)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']
}
配置好了以后,就可以到終端里運(yùn)行webpack --config webpack.config.dll.js了,然后就能在你的dist/dll目錄下看到一個(gè)dll.vendore.js和一個(gè)vendor-manifest.json文件,到此DllPlugin提取依賴的作用就完成了。
下面是DllReferencePlugin的配置,這個(gè)配置更簡(jiǎn)單,找到項(xiàng)目原本的webpack.config.js文件,然后配置如下:
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
context: path.join(__dirname, "src"),
manifest: require("./dll/vendor-manifest.json")
})
]
}
這樣就都配置好了,但是這樣做還存在個(gè)問(wèn)題,當(dāng)你運(yùn)行項(xiàng)目時(shí),會(huì)提示:
You are using the runtime-only build of Vue...
大概的意思就是說(shuō)因?yàn)槟闶褂昧藇ue的template,使用的vue版本不對(duì),所以我在webpack.config.dll.js里面對(duì)vue做如下設(shè)置:
alias: {
'vue$': 'vue/dist/vue.common.js'
}
否則會(huì)默認(rèn)打包vue.runtime.common.js,正確的應(yīng)該是打包vue.common.js這個(gè)文件。做了以上配置以后,本以為就OK了,但還是太天真,依舊還是報(bào)了一樣的錯(cuò)誤。
然后我到webpack.config.js里面做了同樣的配置,結(jié)果就OK了。但是這會(huì)導(dǎo)致vue被打包了兩份,所以暫時(shí)只能放棄在vendor內(nèi)引入vue了,導(dǎo)致該問(wèn)題的原因暫不明了。
相關(guān)文章
JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應(yīng)一堆相似的事件,但是每個(gè)事件的參數(shù)都不同,在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-01-01
原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼
這篇文章主要介紹了原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問(wèn)題解決方案)
本文給大家介紹前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問(wèn)題解決方案),給大家總結(jié)了前端項(xiàng)目安裝依賴,遇到過(guò)的問(wèn)題,每一種問(wèn)題給大家完美解決方案,感興趣的朋友一起看看吧2023-12-12
JavaScript暫停和繼續(xù)定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript暫停和繼續(xù)定時(shí)器的方法的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-07-07
JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
Iframe自適應(yīng)高度一直都備受關(guān)注,接下來(lái)為大家介紹下同域名下Iframe自適應(yīng)高度的處理以及跨域時(shí)Iframe高度自適應(yīng),感興趣的朋友可以參考下哈2013-03-03
微信小程序報(bào)錯(cuò): thirdScriptError的錯(cuò)誤問(wèn)題
這篇文章主要介紹了微信小程序報(bào)錯(cuò): thirdScriptError,本文給大家分享解決方法,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
TypeError document.getElementById(...) is null錯(cuò)誤原因
這篇文章主要介紹了TypeError document.getElementById(...) is null錯(cuò)誤原因,這是很容易犯的一個(gè)低級(jí)錯(cuò)誤,需要的朋友可以參考下2015-05-05
javascript入門(mén)之window對(duì)象【新手必看】
本文系統(tǒng)介紹了javascript的window對(duì)象以及一些控制函數(shù)的用法,僅供大家參考2016-11-11

