webpack實(shí)用小功能介紹
上一次分享了vue2-webpack3,大多都是一些基礎(chǔ)的內(nèi)容,本期繼續(xù)分享一些webpack比較實(shí)用的功能
1.overlay
overlay屬于devServer的屬性,配置案例如下:
devServer: { overlay: { errors: true, warnings: true } }
配置很簡(jiǎn)單,那它的作用是什么呢?overlay的作用是可以在瀏覽器打開的頁(yè)面顯示終端編譯時(shí)產(chǎn)生的錯(cuò)誤。通過配置該屬性,以后在寫代碼的時(shí)候,編譯如果出錯(cuò)了,我們就不需要打開終端看到底是什么報(bào)錯(cuò)了,可以直接在頁(yè)面里看到錯(cuò)誤,對(duì)于開發(fā)而言確實(shí)很方便。
2.require.ensure
相比較overlay,require.ensure可以的作用更加實(shí)用,上次講的vue2-webpack3我們配置的是多頁(yè)面的應(yīng)用,但是如果是SPA應(yīng)用呢?
我們最容易遇到的問題代碼全部打包在一個(gè)js里面,導(dǎo)致這個(gè)js過于龐大,最終導(dǎo)致應(yīng)用首次加載時(shí)等待時(shí)間過長(zhǎng),那么該怎么解決這個(gè)問題呢?require.ensure就是專門用來解決這個(gè)問題的。
該怎么使用?
使用起來也很簡(jiǎn)單,只要按照下面的寫法來進(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,可用來配置js的文件名; 配置完了以后,當(dāng)我們加載這個(gè)頁(yè)面的時(shí)候,屬于每個(gè)頁(yè)面自己的代碼部分,就會(huì)單獨(dú)去加載了。
3.webpack-bundle-analyzer
這是一個(gè)webpack的插件,它的主要作用是用來分析我們模塊打包的資源情況,非常的直觀,也非常的實(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開發(fā)的過程中,相信很多人都會(huì)覺得有時(shí)候項(xiàng)目啟動(dòng)編譯時(shí)間等待太久了,為什么呢?因?yàn)楫?dāng)項(xiàng)目慢慢龐大起來的時(shí)候,我們依賴的模塊越來越多,每次項(xiàng)目啟動(dòng)編譯都需要全部編譯打包,所以自然會(huì)導(dǎo)致編譯時(shí)間偏長(zhǎng),那如何解決這個(gè)問題呢?
首先思路是這樣的,一般node_modules文件中的依賴,基本上是不會(huì)去做改變的,所以沒有必要每次都去進(jìn)行打包,我們完全可以將這些依賴提前打包好,然后就可以一直使用了。
DllPlugin就是用來提前打包我們的依賴包的插件。DllPlugin分為兩個(gè)插件,一個(gè)是DllPlugin,另一個(gè)是DllReferencePlugin。
首先DllPlugin的作用是用來提前打包好依賴,步驟如下:
新建一個(gè)vendor.js,用來引入所有我們依賴的模塊:
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è)問題,當(dāng)你運(yùn)行項(xiàng)目時(shí),會(huì)提示:
You are using the runtime-only build of Vue...
大概的意思就是說因?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)致該問題的原因暫不明了。
相關(guān)文章
JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12JavaScript在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ò)的解決方案(三種問題解決方案)
本文給大家介紹前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問題解決方案),給大家總結(jié)了前端項(xiàng)目安裝依賴,遇到過的問題,每一種問題給大家完美解決方案,感興趣的朋友一起看看吧2023-12-12JavaScript暫停和繼續(xù)定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript暫停和繼續(xù)定時(shí)器的方法的相關(guān)資料,非常不錯(cuò),需要的朋友可以參考下2016-07-07JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
Iframe自適應(yīng)高度一直都備受關(guān)注,接下來為大家介紹下同域名下Iframe自適應(yīng)高度的處理以及跨域時(shí)Iframe高度自適應(yīng),感興趣的朋友可以參考下哈2013-03-03微信小程序報(bào)錯(cuò): thirdScriptError的錯(cuò)誤問題
這篇文章主要介紹了微信小程序報(bào)錯(cuò): thirdScriptError,本文給大家分享解決方法,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06TypeError document.getElementById(...) is null錯(cuò)誤原因
這篇文章主要介紹了TypeError document.getElementById(...) is null錯(cuò)誤原因,這是很容易犯的一個(gè)低級(jí)錯(cuò)誤,需要的朋友可以參考下2015-05-05javascript入門之window對(duì)象【新手必看】
本文系統(tǒng)介紹了javascript的window對(duì)象以及一些控制函數(shù)的用法,僅供大家參考2016-11-11