【webpack20210627-0】webpack 資源打包詳解
阿新 • • 發佈：2021-06-28
webpack 資源打包詳解
一、webpack 五大核心概念
1.1、Entry
入口(Entry)指示Webpack以哪個檔案為入口起點開始打包,分析構建內部依賴圖。
1.2、Output
輸出(Output)指示Webpack打包後的資源bundles輸出到哪裡去,以及如何命名。
1.3、Loader
Loaderi Webpack能夠去處理那些非Javascript檔案(webpack 自身只理解JavaScript)
1.4、Plugins
外掛(Plugins)可以用於執行範圍更廣的任務。外掛的範圍包括,從打包優化和壓縮,一直到重新定義環境中的變數等。
1.5、Mode
模式(Mode)指示Webpack使用相應模式的配置。
| 選項 | 描述 | 特點 |
|---|---|---|
| development | 會將process.env.NODEENV的值設為development。 啟用NamedchunksPlugin和NamedModulesPlugin。 | 能讓程式碼本地除錯執行的環境 |
| production | 會將process.env.NODE_ENV的值設為production 啟用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifysPlugin. | 能讓程式碼優化上線執行的環境 |
二、webpack的初體驗
1.1、初始化環境
> npm init
1.2、安裝 webpack
// 全域性安裝
// npm i webpack webpack-cli -g
// 本地安裝
> npm i webpack webpack-cli -D
1.3、執行指令
1.3.1、建立入口js檔案
// index. js: webpack入口起點檔案
// 路徑： ./src/index.js
function add(x, y){
return x + y;
}
console.log(add(1, 2));
1.3.2、開發環境執行
// 開發環境
// webpack會以./src/index.js為入口檔案開始打包,打包後輸出到./build/built.js整體打包環境,是開發環境
> webpack ./src/index.js -o./build/built.js--mode-development
1.3.3、生產環境執行
// 生產環境
// webpack會以./src/index.js為入口檔案開始打包,打包後輸出到./build/built.js整體打包環境,是生產環境
> webpack ./src/index.js -o ./build/built.js--mode-production
結論:
1、 webpack能處理js/json資源,不能處理css/img等其他資源
2、生產環境和開發環境將ES6模組化編譯成瀏覽器能識別的模組化
3、生產環境比開發環境多一個壓縮js程式碼
三、打包樣式資源
3.1、建立html檔案、 css 檔案或 less 檔案
<!-- 檔案路徑 ./src/index.htmnl -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 學習</title>
</head>
<body>
<h1 id="title">hello webpack</h1>
</body>
</html>
/* 路徑： ./src/index.css */
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: Dpink;
}
// 路徑： ./src/index.less
#title{
color: #fff;
}
3.2、引入 css 檔案或 less 檔案
在 index.js 檔案中引入 css 檔案
// index. js: webpack入口起點檔案
// 路徑： ./src/index.js
// 引入樣式資源
import ../index.css';
import ../index.less';
//……
3.3、配置 webpack配置檔案
// webpack.config.js webpack的配置檔案
// 作用:指示webpack幹哪些活(當你執行webpack指令時,會載入裡面的配置)所有構建工具都是基於nodejs平臺執行的~模組化預設採用commonjs.
// loader: 1.下載 2.使用(配置loader)
// plugins: 1.下載2. 引入 3.使用
// 路徑： ./webpack.config.js
// resolve用來拼接絕對路徑的方法
const { resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起點檔案
entry: './src/index.js',
// 輸出
output: {
//輸出檔名
filename: 'built.js',
//輸出路徑
//__dirname nodejs的變數,代表當前檔案的目錄絕對路徑
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
//打包 css 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.css$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader'
]
},
//打包less 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader',
//將less檔案編譯成css檔案
//需要下載less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
//詳細的plugins配置
//html-webpack-plugin
//功能:預設公建立一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
//需求:需要有結構的HTML檔案
new HtmlWebpackPlugin({
//複製../src/index.html'檔案,並自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html'
})
],
//模式 development 開發環境，production 生產環境
mode: 'development',
// mode: 'production'
}
3.4、打包 css 檔案的核心配置
// webpack.config.js webpack的配置檔案
// 路徑： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包 css 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.css$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader'
]
},
]
},
//……
3.5、打包 less 檔案的核心配置
// webpack.config.js webpack的配置檔案
// 路徑： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包less 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader',
//將less檔案編譯成css檔案
//需要下載less-loader和less
'less-loader'
]
}
]
},
//……
3.6、安裝對應 loader
// 安裝 style-loader和css-loader
> npm i css-loader style-loader -D
// 安裝 less-loader 和 less
> npm i less less-loader -D
3.7、執行
> webpack
- 結論：
> 1、打包css 檔案樣式資源主要使用
style-loader和css-loader。
> 2、打包less 檔案樣式資源主要使用style-loader、css-loader和less-loader。
> 3、多個 loader 時執行順序是從右往左，從下往上。
> 4、樣式檔案在處理後會以字串的形式整合輸出到built.js檔案當中。
四、打包 html 資源
4.1、打包 html檔案的核心配置
// webpack.config.js webpack的配置檔案
// 路徑： ./webpack.config.js
//……
const HtmlWebpackPlugin = require('html-webpack-plugin');
//……
// plugins的配置
plugins: [
//詳細的plugins配置
//html-webpack-plugin
//功能:預設公建立一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
//需求:需要有結構的HTML檔案
new HtmlWebpackPlugin({
//複製../src/index.html'檔案,並自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html'
})
],
//……
4.2、安裝對應外掛
//安裝 html-webpack-plugin 外掛
> npm i html-webpack-plugin -D
4.3、執行
> webpack
- 結論：
> 1、打包
html檔案需要使用html-webpack-plugin外掛
> 2、html-webpack-plugin需要複製一個有結構的HTML檔案，否則預設會建立一個空的HTML
> 3、html-webpack-plugin會自動在打包的html檔案中引入打包輸出的所有資源(JS/CSS)
五、打包圖片資源
5.1、打包圖片的核心配置
// loader的配置
module: {
rules: [
//打包 css 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.css$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader'
]
},
//打包less 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader',
//將less檔案編譯成css檔案
//需要下載less-loader和less
'less-loader'
]
},
{
//問題：預設處理不了 html 中的 img 圖片
//處理圖片資源
test: /\.(jpg|png|gif)$/,
//使用一個loader
//下載url-loader file-loader
loader: 'url-loader',
options: {
//圖片大小小於8kb,就會被base64處理
//優點:減少請求數量(減輕伺服器壓力)
//缺點:圖片體積會更大(檔案請求速度更慢)
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',
options:
{
//預設情況下,生成使用ES塊語法的Js模組
//問題:生成的圖片顯示錯誤
//解決: esModule改為false
esModule: false,
},
}
]
},
5.2、樣式檔案中使用圖片(less場景，css 類似)
#box1{
width: 100px;
height: 100px;
background-image: url('./logo1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
width: 200px;
height: 200px;
background-image: url('./logo2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3{
width: 300px;
height: 300px;
background-image: url('./logo3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
5.2.1、樣式檔案中使用圖片時用到的配置
// loader的配置
module: {
rules: [
//打包 css 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.css$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader'
]
},
//打包less 檔案的詳細loader配置
{
//匹配哪些檔案
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use陣列中loader執行順序:從右到左,從下到上依次執行
//建立style標籤,將js中的樣式資源插入進行,新增到head中生效
'style-loader',
//將css檔案變成commonjs模組載入js中,裡面內容是樣式字串
'css-loader',
//將less檔案編譯成css檔案
//需要下載less-loader和less
'less-loader'
]
},
{
//問題：預設處理不了 html 中的 img 圖片
//處理圖片資源
test: /\.(jpg|png|gif)$/,
//使用一個loader
//下載url-loader file-loader
loader: 'url-loader',
options: {
//圖片大小小於8kb,就會被base64處理
//優點:減少請求數量(減輕伺服器壓力)
//缺點:圖片體積會更大(檔案請求速度更慢)
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]'
}
}
]
},
5.2.2、安裝對應 loader
//安裝 url-loader 和 file-loader
> npm i url-loader file-loader -D
- 結論
1、先配置 css 或 less 檔案的打包配置
2、在配置 圖片打包配置，配置使用 url-loader 和 file-loader
3、為了相容 html 中的圖片打包配置需要關閉url-loader的es6模組化,使用commonjs解析防止解析完後出現解析時會出問題: [object Module]
5.3、html中使用圖片
<!-- 檔案路徑 ./src/index.htmnl -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 學習</title>
</head>
<body>
<h1 id="title">hello webpack</h1>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./logo2.png" alt="html中引用圖片" />
</body>
</html>
5.3.1、html中使用圖片時用到的配置
// loader的配置
module: {
rules: [
{
test: /\.html$/,
//處理html檔案的img圖片(負責引入img,從而能被url-loader進行處理)
loader: 'html-loader',
options:
{
//預設情況下,生成使用ES塊語法的Js模組
//問題:生成的圖片顯示錯誤
//解決: esModule改為false
esModule: false,
},
}
]
},
5.3.2、安裝對應 loader
//在安裝 url-loader 和 file-loader 的基礎上安裝 html-loader
> npm i html-loader -D
- 結論
1、配置圖片打包配置，配置使用 url-loader 、file-loader 和 html-loader
3、為了相容 html 中的圖片打包配置需要關閉html-loader的es6模組化,防止生成的圖片顯示錯誤
5.4、自定義打包圖片名稱
// 注意loader中以下的配置
……
// 給圖片進行重新命名
//[hash:10]取圖片的hash的前10位
// [ext]取檔案原來副檔名
name: '[hash:10].[ext]'
……
專案中使用 logo1.png、logo2.png、logo3.png 等3張圖片
最終顯示效果如下: