Loader
1. 圖片處理
url-loader
將圖片轉換爲base64 URI
{
module:{
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use:[{
loader:"url-loader",
options:{
limit: 5000,
outputPath: "images/",
name: "[name]-[hash:4].[ext]",
fallback: "file-loader"
}
}]
}
]
}
}
fallback
指定當目標文件的大小超過limit選項中設置的限制時要使用的替代加載程序。limit
最大文件大小，單位bytes
2. 自定義字體處理
file-loader
處理使用import('url')、require('url')引入的文件，將引入的文件輸出至output目錄
{
module:{
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name]-[hash:4].[ext]",
outputPath: "fonts"
}
}
]
}
]
}
}
name
輸出的文件名
name: '[name].[ext]' //logo.png
name: '[hash].[ext]' //3a9d7b3c4c00d76d9596a0194300cb94.png
name: '[hash:4].[ext]' //3a9d.png
name: '[name]-[hase:4].[ext]' //logo-3a9d.png
outputPath
輸出路徑
outputPath: './images/'
以output爲相對路徑。eg./dist/images/logo.png
3. 樣式文件處理
{
module:{
rules: [
{
test: /\.(scss|sass)$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
}
less-loader
將less文件編譯爲css文件
css-loader
用於解釋@import、url()
在js中解析import()、require()
舉個栗子。當你 import MyImage from './my-image.png'，該圖像將被處理並添加到 output 目錄，並且 MyImage 變量將包含該圖像在處理後的最終 url。當使用 css-loader 時，如上所示，你的 CSS 中的 url('./my-image.png')會使用類似的過程去處理。loader 會識別這是一個本地文件，並將 ‘./my-image.png’ 路徑，替換爲輸出目錄中圖像的最終路徑。html-loader 以相同的方式處理 <img src="./my-image.png" />
style-loader
通過創建style標籤寫入css來爲DOM添加樣式
換言之，含有 CSS 字符串的 <style> 標籤，將被插入到 html 文件的 <head> 中
Plugin
1. JS、CSS文件壓縮
const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const config = {
optimization: {
minimizer: [new TerserJSPlugin({
terserOptions: {
warnings: false,
compress: {
warnings: false,
// 是否註釋掉console
drop_console: false,
dead_code: true,
drop_debugger: true,
},
output: {
comments: false,
beautify: false,
},
mangle: true,
},
parallel: true,
sourceMap: false
}), new OptimizeCssAssetsPlugin()]
},
};
module.exports = config;
terser-webpack-plugin
該插件使用terser去壓縮js
optimize-css-assets-webpack-plugin
在webpack構建時會尋找css資源並進行優化/壓縮。
2. 從JS文件中提取CSS
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";
const config = {
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? "[name].css" : "[name].[hash].css",
chunkFilename: devMode ? "[id].css" : "[id].[hash].css"
})
]
};
module.exports = config;
mini-css-extract-plugin
該插件將css提取至單獨的文件。每一個包含css的js文件都將創建一個css文件。它將通過創建link標籤引入提取的css文件。它支持按需加載css和SourceMaps。
官網推薦僅在生產環境下，在loaders鏈中使用該插件而不是style-loader，尤其是在開發環境中想使用HMR的時候。
3. 通過自定義HTML模板自動構建入口Index.html
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
inject: true,
hash: false, //開啓hash ?[hash]
chunks: chunks,
minify: process.env.NODE_ENV === "development" ? false : {
removeComments: true, //移除HTML中的註釋
collapseWhitespace: true, //摺疊空白區域 也就是壓縮代碼
removeAttributeQuotes: true, //去除屬性引用
}
})
]
};
module.exports = config;
html-webpack-plugin
該插件將爲你生成一個 HTML5 文件， 其中包括使用 script 標籤的 body 中的所有 webpack 包。
- inject
true/‘body’:所有的js都將會在body元素的最底部引入
‘head’:所有的js都將會在head元素中引入 - hash
true:所有被包含的js和css都將以唯一的哈希值作爲文件名引用 - minify:控制輸出文件是否壓縮並以何種方式壓縮
3. 清理/dist文件夾
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const config = {
plugins: [
new CleanWebpackPlugin()
]
};
module.exports = config;
clean-webpack-plugin
在每次構建前清理/dist文件。
4. 複製文件至構建目錄
const CopyWebpackPlugin = require("copy-webpack-plugin");
const config = {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, "./src/logo.png"),
to: "images/",
ignore: ['*.js'],
flatten: false, //僅複製文件。用於文件夾和文件同名時
}
])
]
};
module.exports = config;
copy-webpack-plugin
複製獨立的文件或整個目錄至構建目錄。
5. 消除冗餘的css
const path = require('path');
const glob = require("glob");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
const config = {
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].[contenthash].css'),
new purifyCssWebpack({
paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
})
]
};
module.exports = config;
***purifycss-webpack***(已棄用)
推薦和'extract-text-webpack-plugin'一起使用
'extract-text-webpack-plugin'
它會將所有的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件。
6.合併定義的webpack配置
const merge = require("webpack-merge");
const webpackConfigBase = require('./webpack.base.conf');
const webpackConfigDev = {...};
module.exports = merge(webpackConfigBase, webpackConfigDev);
webpack-merge
提供merge函數去合併數組及通過創建一個新對象來合併對象
未完待續
commons-chunk-plugin- define-plugin
- 懶加載