webpack實(shí)用小功能的示例分析

這篇文章主要介紹webpack實(shí)用小功能的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),保靖企業(yè)網(wǎng)站建設(shè),保靖品牌網(wǎng)站建設(shè),網(wǎng)站定制,保靖網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,保靖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

webpack比較實(shí)用的功能

1.overlay

overlay屬于devServer的屬性，配置案例如下：

devServer: {
 overlay: {
  errors: true,
  warnings: true
 }
}

配置很簡單，那它的作用是什么呢？overlay的作用是可以在瀏覽器打開的頁面顯示終端編譯時產(chǎn)生的錯誤。通過配置該屬性，以后在寫代碼的時候，編譯如果出錯了，我們就不需要打開終端看到底是什么報錯了，可以直接在頁面里看到錯誤，對于開發(fā)而言確實(shí)很方便。

2.require.ensure

相比較overlay，require.ensure可以的作用更加實(shí)用，上次講的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ù)，將要單獨(dú)打包的模塊傳入回調(diào)里； 第三個參數(shù)是chunkname，可用來配置js的文件名； 配置完了以后，當(dāng)我們加載這個頁面的時候，屬于每個頁面自己的代碼部分，就會單獨(dú)去加載了。

3.webpack-bundle-analyzer

這是一個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'
 })
]

是不是很簡單卻很實(shí)用呢~

4.DllPlugin+DllReferencePlugin

在使用webpack開發(fā)的過程中，相信很多人都會覺得有時候項(xiàng)目啟動編譯時間等待太久了，為什么呢？因?yàn)楫?dāng)項(xiàng)目慢慢龐大起來的時候，我們依賴的模塊越來越多，每次項(xià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']
 }

配置好了以后，就可以到終端里運(yùn)行webpack --config webpack.config.dll.js了，然后就能在你的dist/dll目錄下看到一個dll.vendore.js和一個vendor-manifest.json文件，到此DllPlugin提取依賴的作用就完成了。

下面是DllReferencePlugin的配置，這個配置更簡單，找到項(xiàng)目原本的webpack.config.js文件，然后配置如下：

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

這樣就都配置好了，但是這樣做還存在個問題，當(dāng)你運(yùn)行項(xiàng)目時，會提示：

You are using the runtime-only build of Vue...

大概的意思就是說因?yàn)槟闶褂昧藇ue的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)致該問題的原因暫不明了。

以上是“webpack實(shí)用小功能的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：webpack實(shí)用小功能的示例分析
文章源于：http://muchs.cn/article30/jehsso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、定制開發(fā)、小程序開發(fā)、App設(shè)計(jì)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)