一、認識插件 Plugin

認識Plugin

Webpack的另一個核心是Plugin 官方有這樣一段話對Plugin的描述

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization,asset management and injection of environment variables

翻譯過來就是:

loader是用來 特性的模塊類型 進行轉(zhuǎn)換

Plugin是可以用于 執(zhí)行更加廣泛的任務(wù) 如 打包優(yōu)化 資源管理 環(huán)境變量注入等

二、CleanWebpackPlugin

我們每次修改一些配置 重新打包時 都需要手動刪除 dist文件夾

可以借助這個插件來幫助我們完成

首先 安裝這個插件

npm install clean-webpack-plugin -D

之后在插件中配置

const ?{CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
????// 其他省略 ...
????plugins:[
????????new CleanWebpackPlugin()
????]
}

三、HtmlWebpackPlugin

另外還有一個不太規(guī)范的地方:

我們的HTML文件是編寫在根目錄的,最終打包的dist文件夾中沒有index.html文件的

在進行項目部署時 必須也是需要有對應(yīng)的入口文件index.html

所以我們也需要對index.html進行打包管理

對HTML進行打飽處理 可以使用另一個插件 HtmlWebpackPlugin

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
????// 其他省略 ...
????plugins:[
????????new HtmlWebpackPlugin({
????????????title:"電商項目"
????????})
????]
}

生成index.html分析

自動在dist文件中 生成了一個index.html文件

該文件中也自動添加了我們打包的js文件

這個文件是如何生成的?

默認情況下根據(jù)ejs的一個模塊來生成的

在html-webpack-plugin的源碼中,有一個defaults_index.ejs模塊

自定義HTML模版

如果我們想在自己的模塊中加入一些比較特別的內(nèi)容:

如添加一個 noscript標簽 在用戶的JS被關(guān)閉時 給予響應(yīng)的提示

如在開發(fā)vue或react項目時 需要一個可以掛在后續(xù)組件的跟標簽<div id="app"></div>

自定義模版數(shù)據(jù)填充

在配置HtmlWebpackPlugin時 我們可以添加如下配置

Temolate: 指定我們曜使用的模塊所在的路徑

title:在進行HtmlWebpackPlugin.options.title讀取時 就會讀到該信息

四、DefinePlugin

DefinePlugin的介紹

這個時候編譯還會報錯 因為我們的模塊中還是用到一個 BASE_URL的常量:

這是因為在編譯 template模塊時 有一個 BASE_URL:

<link rel="icon" href="<%=BASE_URL %">favicon.ico">

但是我們并沒有設(shè)置過這歌常量值,所以會出現(xiàn)沒有定義的錯誤

這個時候我們可以使用DefinePlugin插件;

DefinePlugin的使用

DefinePlugin允許在編譯時創(chuàng)建配置的全局常量 是一個webpack內(nèi)置的插件(不需要單獨安裝):

const {DefinePlugin} = require('webpack')

module.exports = {
????// 其他省略
????plugins:[
????????new DefinePlugin({
????????????BASE_URL:'"./"'
????????})
????]
}

五、Mode模式配置

Mode配置

Mode配置選項 可以告知webpack使用相應(yīng)模式的內(nèi)置優(yōu)化

默認值是production(什么都不設(shè)置的情況下)

可選值有:'none'|'development'|'production'

到此這篇關(guān)于Node.js Webpack常見的模式的文章就介紹到這了,更多相關(guān)Node.js Webpack模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論