[Webpack并不難]使用教程（三）--- plugins

Youngs 發(fā)布于2019-08-22 13:40 / 1136人閱讀

摘要：使用教程一，，，使用教程二版本官方的文檔上一篇講到的是被用來轉(zhuǎn)換某些類型的模塊，它則可以用來做更廣泛的任務(wù)?？煽醋鹘壎ㄊ录?，打包時(shí)會(huì)觸發(fā)事件。它的作用是定義全局常量，是常量。為，啟用兩步之間的延遲。請(qǐng)注意，規(guī)范建議始終使用引號(hào)。

使用教程（一）--- entry，devtool，output，resolve
使用教程（二）--- module.loaders
Webpack版本 3.10.0

Plugins (官方的文檔)

上一篇講到的 loader 是被用來轉(zhuǎn)換某些類型的模塊，它則可以用來做更廣泛的任務(wù)。

如：模板編譯輸出，捆綁優(yōu)化，定義類似環(huán)境變量等等。

plugins: [
    new webpack.DefinePlugin({
      "process.env": require("../config/dev.env")
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true
    }),
  ]

plugins: 數(shù)組形式包住一個(gè)個(gè) plugin 實(shí)例。

每個(gè)插件實(shí)例是一個(gè)具有 apply 屬性的 js 對(duì)象 (Function.prototype.apply)。

const webpack = require("webpack");
const configuration = require("./webpack.config.js");
let compiler = webpack(configuration);

function HelloWorldPlugin (options) {
// do something...
}

// this 指向了 compiler。
HelloWorldPlugin.prototype.apply = function (compiler) {
// compiler.plugin(),可看作綁定事件，打包時(shí)會(huì)觸發(fā)事件。
compiler.plugin("run", function() { 
    console.log("hello world!")
});
};

每個(gè)插件都有自身 options（配置）。

下面說下常見的 plugin 。

webpack.DefinePlugin (官方的文檔)

webpack.xxxxPlugin 這種插件是 webpack 的內(nèi)置插件。

DefinePlugin：它的作用是定義全局常量，是常量。即在模塊用它定義的全局常量，那么你就不能改變它的值啦。用法例子：

//webpack.config.js 
Plugins: [
    new webpack.DefinePlugin({
        "_ABC_": false
    })
]

// 在某個(gè)要打包的js模塊里
if （_ABC_）{
    console.log("_ABC_是 true，才看得見這輸出");
}

webpack.HotModuleReplacementPlugin (官方的文檔)

它是熱模塊更換（HMR）。在應(yīng)用程序運(yùn)行時(shí)交換，添加或刪除模塊，而無需完全重新加載。

它的options：

配置屬性	數(shù)據(jù)類型	作用
multiStep	Boolean	如果 true 插件將分兩步建立。首先編譯常更新的模塊，然后編譯剩余的普通資源。
fullBuildTimeout	Number	multiStep 為 true，啟用兩步之間的延遲。
requestTimeout	Number	下載某些東西的超時(shí)時(shí)間

官方講，這些 options 可能會(huì)被棄用 ，就 new webpack.HotModuleReplacementPlugin() 就可以了。

webpack.NoEmitOnErrorsPlugin (官方的文檔)

它的作用：跳過編譯時(shí)出錯(cuò)的代碼并記錄，使編譯后運(yùn)行時(shí)的包不會(huì)發(fā)生錯(cuò)誤。

webpack.optimize.DedupePlugin (官方的文檔)

項(xiàng)目中會(huì)有很多模塊，有些模塊之間存在相同的依賴，那么它的作用是把重復(fù)的依賴刪除掉。

例如 A 模塊和 B 模塊都依賴lodash.js，那么就留在一個(gè) lodash.js ，多余的刪除。

webpack.ProvidePlugin (官方的文檔)

會(huì)自動(dòng)加載模塊，不用 import / require 導(dǎo)入都可用。

Plugins: [
    $: "jquery"
]
// 不用導(dǎo)入 jquery ，都可用 $。
// 可以理解為在全局就 import $ from "jquery" 或 const $ = require("jquery")

HtmlWebpackPlugin --第三方插件（官方的文檔）

根據(jù)你提供的 html 模板生成 html。

因?yàn)槭堑谌讲寮枰惭b，導(dǎo)入使用。

// 安裝
npm install --save-dev html-webpack-plugin

// 導(dǎo)入
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 使用
 new HtmlWebpackPlugin({
  filename: "index.html",
  template: "index.html",
  inject: true
  ... // 其他配置，可看下面。
 })

filename: 生成的文件名?？梢詭窂?。

template：html 模板路徑。

inject："true" | "head" | "body" | "false" 。

true：將所有資源（ js，css 等等）注入模板，js 資源在注入 html 里 body 底部。

body: 將所有 js 資源注入 html 里 body 底部。

head：將 js 資源放在 html 里 head 。

hash： "true" | "false"。如果為 true ，webpack 打包后，所有 js 和 css 都會(huì)帶有 hash 值。這對(duì)緩存清除非常有用。

minify： {...} | "false" 。
{...}：通過 html-minifier 的選項(xiàng)對(duì)象，來減小打包后文件的大小。在生產(chǎn)環(huán)境一般用到。看看里面一般用到什么吧。

collapseWhitespace："true" | "false" 。
可以理解為如果 true ，則減少html 中節(jié)點(diǎn)與節(jié)點(diǎn)之間的空白區(qū)域。用于優(yōu)化 html 。

removeComments：如果 true ，則去掉 html 里的注釋。

removeAttributeQuotes：如果 true ，則盡可能地去掉 html 里標(biāo)簽元素屬性的引號(hào)，有些特定屬性則不會(huì)。（ 請(qǐng)注意，HTML規(guī)范建議始終使用引號(hào)。謹(jǐn)慎使用這選項(xiàng) ）


轉(zhuǎn)換為：

// 可見有些特定的屬性是不會(huì)去掉引號(hào)的。

chunksSortMode："none" | "auto" | "dependency" |"manual" | {function} 。
作用：對(duì)注入 html 中的 js 模塊進(jìn)行排序。默認(rèn)："auto" (自動(dòng)排序)

auto：默認(rèn)，自動(dòng)排序。

none：不排序。

dependency：按依賴排序。

manual：手動(dòng)排序。

{function}：按你傳入函數(shù)的功能進(jìn)行排序。

以上是常見的，還有其他的，想了解可以看下官方文檔哦。

plugins 就講到這里了，以上都是一些常見常用的插件，喜歡的朋友可以點(diǎn)波贊，謝謝啦。

使用教程四

GPU云服務(wù)器云服務(wù)器 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92386.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Youngs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【C++】IO庫： IO類，文件輸入輸出，string流

閱讀 2515·2021-09-09 09:33
前端—初級(jí)階段1(1-4)

閱讀 2876·2019-08-30 15:56
css基礎(chǔ)—字體那些事

閱讀 3159·2019-08-30 14:21
【css】background筆記

閱讀 911·2019-08-30 13:01
three.js 場景切換

閱讀 874·2019-08-26 18:27
數(shù)據(jù)結(jié)構(gòu)與算法-LeetCode 格雷編碼(No.89)

閱讀 3594·2019-08-26 13:47
前端進(jìn)階 & 面試必備，優(yōu)質(zhì)資源、好文整理分享！

閱讀 3465·2019-08-26 10:26
vue總結(jié)

閱讀 1597·2019-08-23 18:38

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

[Webpack并不難]使用教程（三）--- plugins

相關(guān)文章

**[Webpack并不難]使用教程（二）--- module.loaders**

**[webpack并不難]總結(jié)**

**[Webpack并不難]使用教程（四）--- devServer**

**[Webpack并不難]把它當(dāng)人物養(yǎng)成游戲吧。**

**使用offline-plugin搭配webpack輕松實(shí)現(xiàn)PWA**

發(fā)表評(píng)論

0條評(píng)論

Youngs

男|高級(jí)講師

TA的文章

【C++】IO庫： IO類，文件輸入輸出，string流

前端—初級(jí)階段1(1-4)

css基礎(chǔ)—字體那些事

【css】background筆記

three.js 場景切換

數(shù)據(jù)結(jié)構(gòu)與算法-LeetCode 格雷編碼(No.89)

前端進(jìn)階 & 面試必備，優(yōu)質(zhì)資源、好文整理分享！

vue總結(jié)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

[Webpack并不難]使用教程（三）--- plugins

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！