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