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

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

摘要：使用教程一，，，使用教程二版本官方的文檔上一篇講到的是被用來轉換某些類型的模塊，它則可以用來做更廣泛的任務。可看作綁定事件，打包時會觸發(fā)事件。它的作用是定義全局常量，是常量。為，啟用兩步之間的延遲。請注意，規(guī)范建議始終使用引號。

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

Plugins (官方的文檔)

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

如：模板編譯輸出，捆綁優(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ù)組形式包住一個個 plugin 實例。

每個插件實例是一個具有 apply 屬性的 js 對象 (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(),可看作綁定事件，打包時會觸發(fā)事件。
compiler.plugin("run", function() { 
    console.log("hello world!")
});
};

每個插件都有自身 options（配置）。

下面說下常見的 plugin 。

webpack.DefinePlugin (官方的文檔)

webpack.xxxxPlugin 這種插件是 webpack 的內置插件。

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

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

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

webpack.HotModuleReplacementPlugin (官方的文檔)

它是熱模塊更換（HMR）。在應用程序運行時交換，添加或刪除模塊，而無需完全重新加載。

它的options：

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

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

webpack.NoEmitOnErrorsPlugin (官方的文檔)

它的作用：跳過編譯時出錯的代碼并記錄，使編譯后運行時的包不會發(fā)生錯誤。

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

項目中會有很多模塊，有些模塊之間存在相同的依賴，那么它的作用是把重復的依賴刪除掉。

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

webpack.ProvidePlugin (官方的文檔)

會自動加載模塊，不用 import / require 導入都可用。

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

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

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

因為是第三方插件，需要安裝，導入使用。

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

// 導入
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 都會帶有 hash 值。這對緩存清除非常有用。

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

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

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

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

轉換為：

// 可見有些特定的屬性是不會去掉引號的。

chunksSortMode："none" | "auto" | "dependency" |"manual" | {function} 。
作用：對注入 html 中的 js 模塊進行排序。默認："auto" (自動排序)

auto：默認，自動排序。

none：不排序。

dependency：按依賴排序。

manual：手動排序。

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

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

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

使用教程四

GPU云服務器云服務器 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92386.html

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

摘要：官方的文檔模塊受到影響的選項。官方文檔通過注入標簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制，這個限制并不是說超過了就不能打包，而是指當圖片大小小于限制時會自動轉成碼引用。不過它的放后面。第一篇講了Webpack的安裝，以及配置文件的 entry，devtool，output，resolve。這篇接著說配置文件的 module。想看看第一篇的朋友可以點這里。 ...

HollisChuang 2019-08-21 17:59 評論0 收藏0
[webpack并不難]總結

摘要：剛寫的時候，心里有很多小聲音寫不好的萬一寫錯，誤導別人怎么辦等等。最重要還是感謝你的支持。接下來還會寫些有趣的東西帶給大家。這個教程就此完結咯，兩周前的一個念頭也實現(xiàn)了。剛寫的時候，心里有很多小聲音：寫不好的 , 萬一寫錯，誤導別人怎么辦等等。萬事開頭難，寫著寫著就發(fā)現(xiàn)和之前看到的一句話很貼切，輸入一些東西很簡單的，但你要輸出確實比較難。使用教程（一）--- entry，...

forrest23 2019-08-22 11:18 評論0 收藏0
[Webpack并不難]使用教程（四）--- devServer

摘要：使用教程一，，，使用教程二使用教程三我的版本是官方的文檔在開發(fā)模式下，提供虛擬服務器，讓我們進行開發(fā)和調試。文檔如果為，開啟虛擬服務器時，為你的代碼進行壓縮。的警告和錯誤是不輸出到終端的。而則作用于請求路徑上的。不想啟用也可以填。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loaders使用教程（三）--- pl...

Anonymous1 2019-08-22 11:15 評論0 收藏0
[Webpack并不難]把它當人物養(yǎng)成游戲吧。

摘要：發(fā)覺其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什么那么多人用，是不是。我覺得可以把當成人物養(yǎng)成游戲來玩，哦不，來學。聽說把寶石放進這工具就能自動更新打包。公司最近弄來了一些未來的文言文，你把它翻譯成現(xiàn)代文吧。前言這段可以跳過看下面的。本來，這個教程想完結的了。但回頭看自己寫的，感覺就像寫明了什么意思，具體怎么使用都沒說明白，而且讓人看得會有點乏味吧。我也是剛開始...

andot 2019-08-22 11:17 評論0 收藏0
使用offline-plugin搭配webpack輕松實現(xiàn)PWA

摘要：配合的項，能夠實現(xiàn)緩存外部資源的功能。允許接受來自的消息，默認值為。檢查新版本的的更新信息。這也是我在研究階段直接使用時所發(fā)現(xiàn)的問題。建議僅在生產(chǎn)模式內使用。 showImg(https://segmentfault.com/img/bVSVG1?w=1178&h=484); 談起PWA，許多人可能還只停留在了解的層面，比較少在實踐中真正地嘗試過，更多的僅僅是對著網(wǎng)上的教程和例子大概玩...

shadajin 2019-08-22 10:53 評論0 收藏0