柚子快報(bào)邀請(qǐng)碼778899分享：webpack 常用插件
柚子快報(bào)邀請(qǐng)碼778899分享：webpack 常用插件
clean-webpack-plugin 這個(gè)插件的主要作用是清除構(gòu)建目錄中的舊文件，以確保每次構(gòu)建時(shí)都能得到一個(gè)干凈的環(huán)境。
var { CleanWebpackPlugin } = require("clean-webpack-plugin")
const path = require("path");
module.exports = {
mode: "development",
devtool: "source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin()
]
}
默認(rèn)情況下，CleanWebpackPlugin 會(huì)清除輸出目錄（即 output.path 指定的目錄）中的所有文件和子目錄。如果您想自定義哪些文件或目錄需要被清除，您可以在創(chuàng)建 CleanWebpackPlugin 實(shí)例時(shí)傳遞一個(gè)選項(xiàng)
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['**/*', '!/important-file.txt'],
})
在這個(gè)例子中，cleanOnceBeforeBuildPatterns 選項(xiàng)是一個(gè)字符串?dāng)?shù)組，用于指定需要被清除的文件或目錄。在這個(gè)例子中，所有文件和目錄都會(huì)被清除，但是名為 ‘important-file.txt’ 的文件將被排除在清除之外。
html-webpack-plugin 在 Webpack 中，html-webpack-plugin 是一個(gè)用于生成 HTML 文件的插件。template 參數(shù)是這個(gè)插件的一個(gè)重要配置選項(xiàng)，它指定了要使用的 HTML 模板文件的路徑。
當(dāng)您使用 html-webpack-plugin 時(shí)，通常會(huì)提供一個(gè) HTML 模板文件，該文件包含了網(wǎng)站的基本結(jié)構(gòu)和引用。html-webpack-plugin 會(huì)讀取這個(gè)模板文件，并根據(jù)您的 Webpack 配置和入口點(diǎn)來(lái)生成最終的 HTML 文件。 chunks 參數(shù)是這個(gè)插件的一個(gè)重要配置選項(xiàng)，它指定了應(yīng)該在最終生成的 HTML 文件中包含哪些 chunk（即代碼塊）
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path");
module.exports = {
mode: "development",
devtool: "source-map",
entry: {
home: "./src/index.js",
a: "./src/a.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["dist/**/*"] }),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "home.html",
chunks: ["home"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "a.html",
chunks: ["a"]
})
]
}
copy-webpack-plugin 復(fù)制某個(gè)文件或整個(gè)文件夾到生成目錄中
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = {
mode: "development",
devtool: "source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new CopyPlugin([
{ from: "./public", to: "./" }
])
]
}
復(fù)制public下的文件和文件夾到dist目錄下。
webpack-dev-server open:true,告訴 dev-server 在服務(wù)器已經(jīng)啟動(dòng)后打開瀏覽器。設(shè)置其為 true 以打開你的默認(rèn)瀏覽器。
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
devtool: "source-map",
output: {
filename: "scripts/[name].[chunkhash:5].js"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
devServer: {
port: 8000,
open: true,
proxy: { //代理規(guī)則
"/api": {
target: "https://www.bing.com",
changeOrigin: true //更改請(qǐng)求頭中的host和origin
}
}
},
stats: {
modules: false,
colors: true
}
}
file-loader url-loader
file-loader 和 url-loader 都是 Webpack 的加載器（loaders），它們的作用如下： file-loader： 描述：將文件發(fā)送到輸出目錄，并返回（相對(duì)）URL。 用途：通常用于處理圖片、字體等文件資源。 配置：您可以通過(guò)在 Webpack 配置文件中添加 file-loader 來(lái)使用這個(gè)加載器。 url-loader： 描述：如果文件大小小于指定的大小，則將文件轉(zhuǎn)換為 base64 URL，否則使用 file-loader 進(jìn)行處理。 用途：通常與 file-loader 一起使用，用于處理較小的文件資源，將其轉(zhuǎn)換為 base64 URL，以減少 HTTP 請(qǐng)求。 配置：您可以通過(guò)在 Webpack 配置文件中添加 url-loader 來(lái)使用這個(gè)加載器。 總的來(lái)說(shuō)，file-loader 主要用于處理文件資源，而 url-loader 則在 file-loader 的基礎(chǔ)上增加了對(duì)較小文件的處理能力，以減少 HTTP 請(qǐng)求。
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
devtool: "source-map",
output: {
filename: "scripts/[name].[chunkhash:5].js"
},
module: {
rules: [
{
test: /\.(png)|(gif)|(jpg)$/,
use: [{
loader: "url-loader",
options: {
// limit: false //不限制任何大小，所有經(jīng)過(guò)loader的文件進(jìn)行base64編碼返回
limit: 100 * 1024, //只要文件不超過(guò) 100*1024 字節(jié)，則使用base64編碼，否則，交給file-loader進(jìn)行處理
name: "imgs/[name].[hash:5].[ext]"
}
}]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
devServer: {
open: true
},
stats: {
modules: false,
colors: true
}
}
解決路徑問(wèn)題
在使用file-loader或url-loader時(shí)，可能會(huì)遇到一個(gè)非常有趣的問(wèn)題 比如，通過(guò)webpack打包的目錄結(jié)構(gòu)如下：
dist
|—— img
|—— a.png #file-loader生成的文件
|—— scripts
|—— main.js #export default "img/a.png"
|—— html
|—— index.html #
這種問(wèn)題發(fā)生的根本原因：模塊中的路徑來(lái)自于某個(gè)loader或plugin，當(dāng)產(chǎn)生路徑時(shí)，loader或plugin只有相對(duì)于dist目錄的路徑，并不知道該路徑將在哪個(gè)資源中使用，從而無(wú)法確定最終正確的路徑 面對(duì)這種情況，需要依靠webpack的配置publicPath解決
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
devtool: "source-map",
output: {
filename: "scripts/[name].[chunkhash:5].js",
// publicPath: "/" //配置關(guān)閉時(shí)，html文件里的script標(biāo)簽是。配置是'/'時(shí)，html文件里的script標(biāo)簽是
},
module: {
rules: [
{
test: /\.(png)|(gif)|(jpg)$/,
use: [{
loader: "file-loader",
options: {
name: "imgs/[name].[hash:5].[ext]"
}
}]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "html/index.html"
})
],
devServer: {
open: true,
openPage: "html/index.html",
},
stats: {
modules: false,
colors: true
}
}
在 Webpack 中，output.publicPath 是一個(gè)配置項(xiàng)，它用于指定在引用資源（如圖片、字體等）時(shí)應(yīng)該使用的公共路徑。
當(dāng)您在開發(fā)環(huán)境中使用 Webpack 時(shí)，通常會(huì)將資源文件（例如 CSS、JS、圖片等）放在一個(gè)服務(wù)器上，并通過(guò)一個(gè) URL 來(lái)訪問(wèn)這些文件。然而，如果您的資源文件和您的 HTML 文件（即入口文件）不在同一個(gè)域名下，那么瀏覽器可能會(huì)阻止您加載這些資源，因?yàn)樗鼈儽灰暈榭缬蛘?qǐng)求。
為了解決這個(gè)問(wèn)題，您可以使用 output.publicPath 來(lái)告訴 Webpack 在生成資源文件 URL 時(shí)應(yīng)該使用什么樣的公共路徑。例如，如果您的資源文件放在 https://cdn.example.com/assets/ 這個(gè) URL 下，您可以這樣配置 publicPath：
module.exports = {
//...
output: {
publicPath: 'https://cdn.example.com/assets/',
},
};
然后，Webpack 就會(huì)在生成資源文件 URL 時(shí)，自動(dòng)為這些文件添加 publicPath 作為前綴。例如，如果 Webpack 生成了一個(gè)名為 main.js 的 JavaScript 文件，并且 publicPath 被設(shè)置為 https://cdn.example.com/assets/，那么最終生成的 URL 可能看起來(lái)像這樣：https://cdn.example.com/assets/main.js。
需要注意的是，publicPath 的值也可以是一個(gè)相對(duì)路徑。例如，如果您的資源文件放在與 HTML 文件相同的域名下，但是位于不同的目錄中，您可以這樣配置 publicPath：
module.exports = {
//...
output: {
publicPath: '/assets/',
},
};
在這個(gè)例子中，publicPath 被設(shè)置為 /assets/，這意味著資源文件會(huì)被放置在與 HTML 文件相同域名的根目錄下的 /assets/ 目錄下。
內(nèi)置插件 DefinePlugin BannerPlugin ProvidePlugin
DefinePlugin 允許在 編譯時(shí) 將你代碼中的變量替換為其他值或表達(dá)式。這在需要根據(jù)開發(fā)模式與生產(chǎn)模式進(jìn)行不同的操作時(shí)，非常有用。例如，如果想在開發(fā)構(gòu)建中進(jìn)行日志記錄，而不在生產(chǎn)構(gòu)建中進(jìn)行，就可以定義一個(gè)全局常量去判斷是否記錄日志。這就是 DefinePlugin 的發(fā)光之處，設(shè)置好它，就可以忘掉開發(fā)環(huán)境和生產(chǎn)環(huán)境的構(gòu)建規(guī)則。
請(qǐng)注意，由于本插件會(huì)直接替換文本，因此提供的值必須在字符串本身中再包含一個(gè) 實(shí)際的引號(hào) 。通常，可以使用類似 ‘“production”’ 這樣的替換引號(hào)，或者直接用 JSON.stringify(‘production’)。 為每個(gè) chunk 文件頭部添加 banner。
ProvidePlugin自動(dòng)加載模塊，而不必導(dǎo)入或隨處要求這些模塊。
所有的webpack內(nèi)置插件都作為webpack的靜態(tài)屬性存在的，使用下面的方式即可創(chuàng)建一個(gè)插件對(duì)象
const webpack = require("webpack")
new webpack.插件名(options)
DefinePlugin
全局常量定義插件，使用該插件通常定義一些常量值，例如：
new webpack.DefinePlugin({
PI: `Math.PI`, // PI = Math.PI
VERSION: `"1.0.0"`, // VERSION = "1.0.0"
DOMAIN: JSON.stringify("duyi.com")
})
這樣一來(lái)，在源碼中，我們可以直接使用插件中提供的常量，當(dāng)webpack編譯完成后，會(huì)自動(dòng)替換為常量的值
BannerPlugin
它可以為每個(gè)chunk生成的文件頭部添加一行注釋，一般用于添加作者、公司、版權(quán)等信息
new webpack.BannerPlugin({
banner: `
hash:[hash]
chunkhash:[chunkhash]
name:[name]
author:yuanjin
corporation:duyi
`
})
ProvidePlugin
自動(dòng)加載模塊，而不必到處 import 或 require
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash'
})
然后在我們?nèi)我庠创a中：
$('#item'); // <= 起作用
_.drop([1, 2, 3], 2); // <= 起作用
柚子快報(bào)邀請(qǐng)碼778899分享：webpack 常用插件
好文閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Poshmark海外時(shí)尚秀
