一、認(rèn)識(shí)插件 Plugin

認(rèn)識(shí)Plugin

Webpack的另一個(gè)核心是Plugin 官方有這樣一段話對(duì)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是用來 特性的模塊類型 進(jìn)行轉(zhuǎn)換

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

二、CleanWebpackPlugin

我們每次修改一些配置 重新打包時(shí) 都需要手動(dòng)刪除 dist文件夾

可以借助這個(gè)插件來幫助我們完成

首先 安裝這個(gè)插件

npm install clean-webpack-plugin -D

之后在插件中配置

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

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

三、HtmlWebpackPlugin

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

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

在進(jìn)行項(xiàng)目部署時(shí) 必須也是需要有對(duì)應(yīng)的入口文件index.html

所以我們也需要對(duì)index.html進(jìn)行打包管理

對(duì)HTML進(jìn)行打飽處理 可以使用另一個(gè)插件 HtmlWebpackPlugin

npm install html-webpack-plugin -D

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

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

生成index.html分析

自動(dòng)在dist文件中 生成了一個(gè)index.html文件

該文件中也自動(dòng)添加了我們打包的js文件

這個(gè)文件是如何生成的?

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

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

自定義HTML模版

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

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

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

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

在配置HtmlWebpackPlugin時(shí) 我們可以添加如下配置

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

title:在進(jìn)行HtmlWebpackPlugin.options.title讀取時(shí) 就會(huì)讀到該信息

四、DefinePlugin

DefinePlugin的介紹

這個(gè)時(shí)候編譯還會(huì)報(bào)錯(cuò) 因?yàn)槲覀兊哪K中還是用到一個(gè) BASE_URL的常量:

這是因?yàn)樵诰幾g template模塊時(shí) 有一個(gè) BASE_URL:

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

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

這個(gè)時(shí)候我們可以使用DefinePlugin插件;

DefinePlugin的使用

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

const {DefinePlugin} = require('webpack')

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

五、Mode模式配置

Mode配置

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

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

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

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

最新評(píng)論