第一章 Webpack簡介
1.1 Webpack是什么
webpack 是一種前端資源構建工具关串，一個靜態(tài)模塊打包器(module bundler)扒秸。
在 webpack 看來,前端的所有資源文件(js/json/css/img/less/...)都會作為模塊處理敛苇。它將根據(jù)模塊的依賴關系進行靜態(tài)分析逗威，打包生成對應的靜態(tài)資源(bundle)构眯。
1.2 webpack 五個核心概念
1.2.1 Entry
入口(Entry)指示 webpack 以哪個文件為入口起點開始打包寥裂，分析構建內(nèi)部依賴圖趁舀。
1.2.2 Output
輸出(Output)指示 webpack 打包后的資源 bundles 輸出到哪里去赖捌，以及如何命名。
1.2.3 Loader
Loader 讓 webpack 能 夠 去 處 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解
JavaScript)
1.2.4 Plugins
插件(Plugins)可以用于執(zhí)行范圍更廣的任務矮烹。插件的范圍包括越庇，從打包優(yōu)化和壓縮，
一直到重新定義環(huán)境中的變量等奉狈。
1.2.5 Mode
模式(Mode)指示 webpack 使用相應模式的配置卤唉。
第 2 章：webpack 的初體驗
2.1 初始化配置
- 初始化 package.json
輸入指令:
npm init
- 下載并安裝 webpack
輸入指令:
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
2.2 編譯打包應用
- 創(chuàng)建文件
- 運行指令
開發(fā)環(huán)境指令：
webpack src/js/index.js -o build/js/built.js --mode=development
功能：webpack 能夠編譯打包 js 和 json 文件，并且能將 es6 的模塊化語法轉(zhuǎn)換成
瀏覽器能識別的語法嘹吨。
生產(chǎn)環(huán)境指令：
webpack src/js/index.js -o build/js/built.js --mode=production
功能：在開發(fā)配置功能上多一個功能搬味，壓縮代碼。
- 結(jié)論
webpack 能夠編譯打包 js 和 json 文件蟀拷。
能將 es6 的模塊化語法轉(zhuǎn)換成瀏覽器能識別的語法碰纬。
能壓縮代碼。 - 問題
不能編譯打包 css问芬、img 等文件悦析。
不能將 js 的 es6 基本語法轉(zhuǎn)化為 es5 以下語法。
第 3 章：webpack 開發(fā)環(huán)境的基本配置
3.1 創(chuàng)建配置文件
- 創(chuàng)建文件 webpack.config.js
- 配置內(nèi)容如下
const {
resolve
} = require('path'); // node 內(nèi)置核心模塊此衅，用來處理路徑問題强戴。
module.exports = {
entry: './src/js/index.js', // 入口文件
output: { // 輸出配置
filename: './built.js', // 輸出文件名
path: resolve(__dirname, 'build/js') // 輸出文件路徑配置
},
mode: 'development' //開發(fā)環(huán)境
};
- 運行指令: webpack
- 結(jié)論: 此時功能與上節(jié)一致
3.2 打包樣式資源
- 創(chuàng)建文件
- 下載安裝 loader 包
npm i css-loader style-loader less-loader less -D
- 修改配置文件
// resolve 用來拼接絕對路徑的方法
const {
resolve
} = require('path');
module.exports = {
// webpack 配置
// 入口起點
entry: './src/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'built.js',
// 輸出路徑
// __dirname nodejs 的變量亭螟，代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build')
},
// loader 的配置
module: {
rules: [
// 詳細 loader 配置
// 不同文件必須配置不同 loader 處理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些 loader 進行處理
use: [
// use 數(shù)組中 loader 執(zhí)行順序：從右到左，從下到上 依次執(zhí)行
// 創(chuàng)建 style 標簽骑歹，將 js 中的樣式資源插入進行预烙，添加到 head 中生效
'style-loader',
// 將 css 文件變成 commonjs 模塊加載 js 中，里面內(nèi)容是樣式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 將 less 文件編譯成 css 文件
// 需要下載 less-loader 和 less
'less-loader'
]
}
]
},
// plugins 的配置
plugins: [
// 詳細 plugins 的配置
],
// 模式
mode: 'development', // 開發(fā)模式
// mode: 'production'
}
- 運行指令: webpack
3.3 打包 HTML 資源
- 創(chuàng)建文件
- 下載安裝 plugin 包
npm install --save-dev html-webpack-plugin
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
]
},
plugins: [
// plugins 的配置
// html-webpack-plugin
// 功能：默認會創(chuàng)建一個空的 HTML道媚，自動引入打包輸出的所有資源（JS/CSS）
// 需求：需要有結(jié)構的 HTML 文件
new HtmlWebpackPlugin({
// 復制 './src/index.html' 文件扁掸，并自動引入打包輸出的所有資源（JS/CSS）
template: './src/index.html'
})
],
mode: 'development'
};
4.運行指令: webpack
3.4 打包圖片資源
- 創(chuàng)建文件
- 下載安裝 loader 包
npm install --save-dev html-loader url-loader file-loader
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.less$/,
// 要使用多個 loader 處理用 use
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 問題：默認處理不了 html 中 img 圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
// 使用一個 loader
// 下載 url-loader file-loader
loader: 'url-loader',
options: {
// 圖片大小小于 8kb，就會被 base64 處理
// 優(yōu)點: 減少請求數(shù)量（減輕服務器壓力）
// 缺點：圖片體積會更大（文件請求速度更慢）
limit: 8 * 1024,
// 問題：因為 url-loader 默認使用 es6 模塊化解析最域，而 html-loader 引入圖片是 commonjs
// 解析時會出問題：[object Module]
// 解決：關閉 url-loader 的 es6 模塊化谴分，使用 commonjs 解析
esModule: false,
// 給圖片進行重命名
// [hash:10]取圖片的 hash 的前 10 位
// [ext]取文件原來擴展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 處理 html 文件的 img 圖片（負責引入 img，從而能被 url-loader 進行處理）
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
- 運行指令: webpack
3.5 打包其他資源
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他資源(除了 html/js/css 資源以外的資源)
{
// 排除 css/js/html 資源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
- 運行指令: webpack
3.6 devserver
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他資源(除了 html/js/css 資源以外的資源)
{
// 排除 css/js/html 資源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
// 項目構建后路徑
contentBase: resolve(__dirname, 'build'),
// 啟動 gzip 壓縮
compress: true,
// 端口號
port: 3000,
// 自動打開瀏覽器
open: true
}
};
- 運行指令: npx webpack-dev-server
3.7 開發(fā)環(huán)境配置
1.創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
{
// 處理 less 資源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 處理 css 資源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 關閉 es6 模塊化
esModule: false,
outputPath: 'imgs'
}
},
{
// 處理 html 中 img 資源
test: /\.html$/,
loader: 'html-loader'
},
{
// 處理其他資源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins 的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
};
- 運行指令: npx webpack-dev-server
第 4 章：webpack 生產(chǎn)環(huán)境的基本配置
4.1 提取 css 成單獨文件
- 下載安裝包
2.下載插件
npm install --save-dev mini-css-extract-plugin
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [
// 創(chuàng)建 style 標簽镀脂，將樣式放入
// 'style-loader',
// 這個 loader 取代 style-loader牺蹄。作用：提取 js 中的 css 成單獨文件
MiniCssExtractPlugin.loader,
// 將 css 文件整合到 js 文件中
'css-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 對輸出的 css 文件進行重命名
filename: 'css/built.css'
})
],
mode: 'development'
};
4 .運行指令: webpack
4.2 css 兼容性處理
1.創(chuàng)建文件
2.下載 loader
npm install --save-dev postcss-loader postcss-preset-env
3.修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 設置 nodejs 環(huán)境變量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
};
- 修改 package.json
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
- 運行指令: webpack
4.3 壓縮 css
1.創(chuàng)建文件
- 下載安裝包
npm install --save-dev optimize-css-assets-webpack-plugin
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 設置 nodejs 環(huán)境變量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 壓縮 css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
};
- 運行指令: webpack
4.4 js 語法檢查
1.創(chuàng)建文件
- 下載安裝包
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 設置 nodejs 環(huán)境變量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*語法檢查： eslint-loader eslint
注意：只檢查自己寫的源代碼，第三方的庫是不用檢查的
設置檢查規(guī)則：
package.json 中 eslintConfig 中設置~
"eslintConfig": {
"extends": "airbnb-base"
}
airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自動修復 eslint 的錯誤
fix: true
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 壓縮 css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
};
- 配置 package.json
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
- 運行指令: webpack
4.5 js 兼容性處理
1.創(chuàng)建文件
- 下載安裝包
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定 core-js 版本
corejs: {
version: 3
},
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
- 運行指令: webpack
4.6 js 壓縮
1.創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
// 生產(chǎn)環(huán)境下會自動壓縮 js 代碼
mode: 'production'
};
- 運行指令: webpack
4.7 HTML 壓縮
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 壓縮 html 代碼
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注釋
removeComments: true
}
})
],
mode: 'production'
};
- 運行指令:webpack
4.8 生產(chǎn)環(huán)境配置
1.創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定義 nodejs 環(huán)境變量：決定使用 browserslist 的哪個環(huán)境
process.env.NODE_ENV = 'production';
// 復用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 還需要在 package.json 中定義 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*正常來講薄翅，一個文件只能被一個 loader 處理沙兰。
當一個文件要被多個 loader 處理，那么一定要指定 loader 執(zhí)行的先后順序：
先執(zhí)行 eslint 在執(zhí)行 babel
*/
{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 優(yōu)先執(zhí)行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
- 運行指令: webpack
第 5 章：webpack 優(yōu)化配置
5.1 HMR
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
{
// 處理 less 資源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 處理 css 資源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 關閉 es6 模塊化
esModule: false,
outputPath: 'imgs'
}
},
{
// 處理 html 中 img 資源
test: /\.html$/,
loader: 'html-loader'
},
{
// 處理其他資源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins 的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
// 開啟 HMR 功能
// 當修改了 webpack 配置匿刮，新配置要想生效僧凰，必須重新 webpack 服務
hot: true
}
};
- 運行指令: webpack
5.2 source-map
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
{
// 處理 less 資源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 處理 css 資源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 關閉 es6 模塊化
esModule: false,
outputPath: 'imgs'
}
},
{
// 處理 html 中 img 資源
test: /\.html$/,
loader: 'html-loader'
},
{
// 處理其他資源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins 的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
hot: true
},
devtool: 'eval-source-map'
};
- 運行指令: webpack
5.3 oneOf
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定義 nodejs 環(huán)境變量：決定使用 browserslist 的哪個環(huán)境
process.env.NODE_ENV = 'production';
// 復用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 還需要在 package.json 中定義 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 優(yōu)先執(zhí)行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個
// 注意：不能有兩個配置處理同一種類型文件
oneOf: [{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*正常來講探颈，一個文件只能被一個 loader 處理熟丸。
當一個文件要被多個 loader 處理，那么一定要指定 loader 執(zhí)行的先后順序：
先執(zhí)行 eslint 在執(zhí)行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
- 運行指令:webpack
5.4 緩存
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定義 nodejs 環(huán)境變量：決定使用 browserslist 的哪個環(huán)境
process.env.NODE_ENV = 'production';
// 復用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 還需要在 package.json 中定義 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 優(yōu)先執(zhí)行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個
// 注意：不能有兩個配置處理同一種類型文件
oneOf: [{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*正常來講伪节，一個文件只能被一個 loader 處理光羞。
當一個文件要被多個 loader 處理，那么一定要指定 loader 執(zhí)行的先后順序：
先執(zhí)行 eslint 在執(zhí)行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 開啟 babel 緩存
// 第二次構建時怀大，會讀取之前的緩存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production',
devtool: 'source-map'
};
- 運行指令: webpack
5.5 tree shaking
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定義 nodejs 環(huán)境變量：決定使用 browserslist 的哪個環(huán)境
process.env.NODE_ENV = 'production';
// 復用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 還需要在 package.json 中定義 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 優(yōu)先執(zhí)行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個
// 注意：不能有兩個配置處理同一種類型文件
oneOf: [{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*正常來講纱兑，一個文件只能被一個 loader 處理。
當一個文件要被多個 loader 處理化借，那么一定要指定 loader 執(zhí)行的先后順序：
先執(zhí)行 eslint 在執(zhí)行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 開啟 babel 緩存
// 第二次構建時潜慎，會讀取之前的緩存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production',
devtool: 'source-map'
};
- 運行指令: webpack
5.6 code split
- 創(chuàng)建文件
2.1 修改 demo1 配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 單入口
// entry: './src/js/index.js',
entry: {
// 多入口：有一個入口，最終輸出就有一個 bundle
index: './src/js/index.js',
test: './src/js/test.js'
},
output: {
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
2.2 修改 demo2 配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 單入口
// entry: './src/js/index.js',
entry: {
index: './src/js/index.js',
test: './src/js/test.js'
},
output: {
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
/*
1. 可以將 node_modules 中代碼單獨打包一個 chunk 最終輸出
2. 自動分析多入口 chunk 中蓖康，有沒有公共的文件铐炫。如果有會打包成單獨一個 chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
2.3 修改 demo3 配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 單入口
entry: './src/js/index.js',
output: {
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
/*
1. 可以將 node_modules 中代碼單獨打包一個 chunk 最終輸出
2. 自動分析多入口 chunk 中，有沒有公共的文件蒜焊。如果有會打包成單獨一個 chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
- 運行指令: webpack
5.7 lazy loading
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 單入口
entry: './src/js/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
- 運行指令: webpack
5.8 pwa
- 創(chuàng)建文件
- 下載安裝包
npm install --save-dev workbox-webpack-plugin
- 修改配置文件
const {
resolve
} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
/*
PWA: 漸進式網(wǎng)絡開發(fā)應用程序(離線可訪問)
workbox --> workbox-webpack-plugin
*/
// 定義 nodejs 環(huán)境變量：決定使用 browserslist 的哪個環(huán)境
process.env.NODE_ENV = 'production';
// 復用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 還需要在 package.json 中定義 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 優(yōu)先執(zhí)行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個
// 注意：不能有兩個配置處理同一種類型文件
oneOf: [{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*正常來講倒信，一個文件只能被一個 loader 處理。
當一個文件要被多個 loader 處理泳梆，那么一定要指定 loader 執(zhí)行的先后順序：
先執(zhí)行 eslint 在執(zhí)行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 開啟 babel 緩存
// 第二次構建時鳖悠，會讀取之前的緩存
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new WorkboxWebpackPlugin.GenerateSW({
/*
1. 幫助 serviceworker 快速啟動
2. 刪除舊的 serviceworker
生成一個 serviceworker 配置文件~
*/
clientsClaim: true,
skipWaiting: true
})
],
mode: 'production',
devtool: 'source-map'
};
- 運行指令:webpack
5.9 多進程打包
- 創(chuàng)建文件
- 下載安裝包
npm install --save-dev thread-loader
- 修改配置文件
const {
resolve
} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
/*
PWA: 漸進式網(wǎng)絡開發(fā)應用程序(離線可訪問)
workbox --> workbox-webpack-plugin
*/
// 定義 nodejs 環(huán)境變量：決定使用 browserslist 的哪個環(huán)境
process.env.NODE_ENV = 'production';
// 復用 loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 還需要在 package.json 中定義 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
// 在 package.json 中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 優(yōu)先執(zhí)行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個
// 注意：不能有兩個配置處理同一種類型文件
oneOf: [{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*正常來講榜掌，一個文件只能被一個 loader 處理。
當一個文件要被多個 loader 處理乘综，那么一定要指定 loader 執(zhí)行的先后順序：
先執(zhí)行 eslint 在執(zhí)行 babel
*/
{
test: /\.js$/,
exclude: /node_modules/,
use: [
/*開啟多進程打包憎账。
進程啟動大概為 600ms，進程通信也有開銷卡辰。
只有工作消耗時間比較長鼠哥，才需要多進程打包
*/
{
loader: 'thread-loader',
options: {
workers: 2 // 進程 2 個
}
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 開啟 babel 緩存
// 第二次構建時，會讀取之前的緩存
cacheDirectory: true
}
}
]
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new WorkboxWebpackPlugin.GenerateSW({
/*
1. 幫助 serviceworker 快速啟動
2. 刪除舊的 serviceworker
生成一個 serviceworker 配置文件~
*/
clientsClaim: true,
skipWaiting: true
})
],
mode: 'production',
devtool: 'source-map'
};
- 運行指令:webpack
5.10 externals
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'production',
externals: {
// 拒絕 jQuery 被打包進來
jquery: 'jQuery'
}
};
- 運行指令:webpack
5.10 dll
- 創(chuàng)建文件
2.修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 告訴 webpack 哪些庫不參與打包看政，同時使用時的名稱也得變~
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 將某個文件打包輸出去朴恳，并在 html 中自動引入該資源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
mode: 'production'
};
- 運行指令:webpack
第 6 章：webpack 配置詳情
6.1 entry
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: ['./src/index.js', './src/count.js'],
add: './src/add.js'
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'build')
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
- 運行指令:webpack
6.2 output
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
// 文件名稱（指定名稱+目錄）
filename: 'js/[name].js',
// 輸出文件目錄（將來所有資源輸出的公共目錄）
path: resolve(__dirname, 'build'),
// 所有資源引入公共路徑前綴 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
publicPath: '/',
chunkFilename: 'js/[name]_chunk.js', // 非入口 chunk 的名稱
// library: '[name]', // 整個庫向外暴露的變量名
// libraryTarget: 'window' // 變量名添加到哪個上 browser
// libraryTarget: 'global' // 變量名添加到哪個上 node
// libraryTarget: 'commonjs'
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
- 運行指令:webpack
6.3 module
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
{
test: /\.css$/,
// 多個 loader 用 use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 排除 node_modules 下的 js 文件
exclude: /node_modules/,
// 只檢查 src 下的 js 文件
include: resolve(__dirname, 'src'),
// 優(yōu)先執(zhí)行
enforce: 'pre',
// 延后執(zhí)行
// enforce: 'post',
// 單個 loader 用 loader
loader: 'eslint-loader',
options: {}
},
{
// 以下配置只會生效一個
oneOf: []
}
]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
- 運行指令:webpack
6.4 resolve
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
// 解析模塊的規(guī)則
resolve: {
// 配置解析模塊路徑別名: 優(yōu)點簡寫路徑 缺點路徑?jīng)]有提示
alias: {
$css: resolve(__dirname, 'src/css')
},
// 配置省略文件路徑的后綴名
extensions: ['.js', '.json', '.jsx', '.css'],
// 告訴 webpack 解析模塊是去找哪個目錄
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}
};
- 運行指令:webpack
6.5 dev server
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/[name].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development',
resolve: {
alias: {
$css: resolve(__dirname, 'src/css')
},
extensions: ['.js', '.json', '.jsx', '.css'],
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
},
devServer: {
// 運行代碼的目錄
contentBase: resolve(__dirname, 'build'),
// 監(jiān)視 contentBase 目錄下的所有文件，一旦文件變化就會 reload
watchContentBase: true,
watchOptions: {
// 忽略文件
ignored: /node_modules/
},
// 啟動 gzip 壓縮
compress: true,
// 端口號
port: 5000,
// 域名
host: 'localhost',
// 自動打開瀏覽器
open: true,
// 開啟 HMR 功能
hot: true,
// 不要顯示啟動服務器日志信息
clientLogLevel: 'none',
// 除了一些基本啟動信息以外允蚣，其他內(nèi)容都不要顯示
quiet: true,
// 如果出錯了于颖，不要全屏提示~
overlay: false,
// 服務器代理 --> 解決開發(fā)環(huán)境跨域問題
proxy: {
// 一旦 devServer(5000)服務器接受到 /api/xxx 的請求，就會把請求轉(zhuǎn)發(fā)到另外一個服務器
//(3000)
'/api': {
target: 'http://localhost:3000',
// 發(fā)送請求時嚷兔，請求路徑重寫：將 /api/xxx --> /xxx （去掉/api）
pathRewrite: {
'^/api': ''
}
}
}
}
};
- 運行指令:webpack
6.6 optimization
- 創(chuàng)建文件
- 修改配置文件
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build'),
chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [new HtmlWebpackPlugin()],
mode: 'production',
resolve: {
alias: {
$css: resolve(__dirname, 'src/css')
},
extensions: ['.js', '.json', '.jsx', '.css'],
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
},
optimization: {
splitChunks: {
chunks: 'all'
// 默認值森渐，可以不寫~
},
// 將當前模塊的記錄其他模塊的 hash 單獨打包為一個文件 runtime
// 解決：修改 a 文件導致 b 文件的 contenthash 變化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生產(chǎn)環(huán)境的壓縮方案：js 和 css
new TerserWebpackPlugin({
// 開啟緩存
cache: true,
// 開啟多進程打包
parallel: true,
// 啟動 source-map
sourceMap: true
})
]
}
};
- 運行指令:webpack
