目錄
- 第一章 Webpack4簡介
- 1.1、Webpack4簡介
- 1.2、Wepback4目標
- 1.3、Webpack4快速入門
- 第二章 Webpack4資源管理
- 2.1、處理樣式資源
- 2.2、處理腳本資源
- 2.3、處理影像資源
- 2.4、處理字體資源
- 2.5、處理其它資源
- 2.6、處理頁面資源
- 2.7、配置開發服務
- 第三章 Webpack4環境配置
- 3.1、開發環境配置
- 3.2、生產環境配置
配套資料，免費下載
鏈接：https://pan.baidu.com/s/1NJtOQMA7nrIhuwmE-UDQaA
提取碼：jfb9
復制這段內容后打開百度網盤手機App，操作更方便哦
第一章 Webpack4簡介
1.1、Webpack4簡介
webpack 是一種前端資源構建工具，一個靜態模塊打包器(module bundler)， 在 webpack 看來, 前端的所有資源檔案(js/json/css/less/sass/img/…)都會作為模塊處理， 它將根據模塊的依賴關系進行靜態分析，打包生成對應的靜態資源(bundle)，
模塊要能夠在客戶端中去執行，則必須將它們從 server => browser
- 一種極端的想法:
- 一個請求一個模塊，只有需要的模塊會被轉換，但是耗費資源，時間長
- 所有請求都在一個模塊，不需要的模塊也會被轉換時間短，耗費資源少
- 分塊轉換的想法:
- 將眾多的模塊切成許多片，在初始化時的請求不會包括完整的代碼，并且在初始化時不需要的模塊切片會在后續加載程序中按需加載，并且將模塊化的切片方式是可以有開發人員自己定義的，
我們知道，對于瀏覽器來說，加載的資源越少，回應的速度也就越快，所以有時候我們為了優化瀏覽器的性能，會盡可能的將資源合并到一個主檔案app.js里面，但是這導致的很大的缺點：
- 當你的專案十分龐大的時候，不同的頁面不能做到按需加載，而是將所有的資源一并加載，耗費時間長，性能降低，
- 會導致依賴庫之間關系的混亂，特別是大型專案時，會變得難以維護和跟蹤，比如：哪些檔案是需要A模塊加載完后才能執行的？哪些頁面會受到多個樣式表同時影響的？ 等許多問題，
而 webpack 可以很好的解決以上缺點，因為它是一個十分聰明的模塊打包系統，當你正確配置后，它會比你想象中的更強大，更優秀，
1.2、Wepback4目標
webpack 能將依賴的模塊轉化成可以代表這些包的靜態檔案，它的目標有：
- 將依賴的模塊分片化，并且按需加載
- 解決大型專案初始化加載慢的問題
- 每一個靜態檔案都可以看成一個模塊
- 可以整合第三方庫
- 能夠在大型專案中運用
- 可以自定義切割模塊的方式
1.3、Webpack4快速入門
我們先要做一個 必需 的準備作業，那就是允許在你的系統上運行腳本，在底部左側導航欄輸入 Windows PowerShell ，然后 以管理員身份運行 ，在打開的PowerShell視窗中，輸入指定的指令 Set-ExecutionPolicy RemoteSigned ，等彈出內容輸入 Y 確定即可，
注意：本教程所采用的是 Node.js v14.15.0，
首先我們創建一個目錄，初始化 npm，然后在本地安裝 webpack，接著安裝 webpack-cli（此工具用于在命令列中運行 webpack）：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install --save-dev webpack@4.44.2 webpack-cli@3.3.12
注意：是否使用
--save-dev取決于你的應用場景，假設你僅使用 webpack 進行構建操作，那么建議你在安裝時使用--save-dev選項，因為可能你不需要在生產環境上使用 webpack，如果需要應用于生產環境，請忽略--save-dev選項，
接下來，我們需要運行 npm install --save-dev jquery@3.5.1 下載一個jQuery庫，然后為接下來的使用提供依賴，
npm install --save-dev jquery@3.5.1
現在，我們將創建以下目錄結構、檔案和內容：
創建一個src目錄，目錄中創建一個 index.js ，檔案內容如下：
// 匯入剛才下載的jQuery庫
import $ from 'jquery';
// 為h1大標題美化樣式
$('h1').css('color','red');
創建一個dist目錄，目錄中創建一個 index.html ，檔案內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h1>Hello,Webpack!</h1>
<script src="main.js"></script>
</body>
</html>
現在，我們將會打包所有腳本，執行 npx webpack，會將我們的腳本 src/index.js 作為入口起點（默認），也會將 dist/main.js 作為輸出路徑（默認），Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以運行在初次安裝的 webpack package 中的 webpack 二進制檔案：
npx webpack
在瀏覽器中打開 dist 目錄下的 index.html，如果一切正常，你應該能看到以下紅色文本：'Hello,Webpack!'，
ES2015 中的 import 和 export 陳述句已經被標準化，雖然大多數瀏覽器還無法支持它們，但是 webpack 卻能夠提供開箱即用般的支持，
事實上，webpack 在幕后會將代碼“轉譯”，以便舊版本瀏覽器可以執行，如果你檢查 dist/main.js，你可以看到 webpack 具體如何實作，這是獨創精巧的設計！除了 import 和 export，webpack 還能夠很好地支持多種其它模塊語法，
在 webpack v4 中，可以無須任何配置，然而大多數專案會需要很復雜的設定，這就是為什么 webpack 仍然要支持組態檔，這比在 terminal(終端) 中手動輸入大量命令要高效的多，所以讓我們創建一個組態檔：
webpack.config.js
const { resolve } = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: resolve(__dirname, 'dist'),
},
mode: 'development'
};
現在，讓我們通過新的組態檔再次執行命令重新進行構建：
npx webpack --config webpack.config.js
注意：如果
webpack.config.js存在，則webpack命令將默認選擇使用它，我們在這里使用--config選項只是向你表明，可以傳遞任何名稱的組態檔，這對于需要拆分成多個檔案的復雜配置是非常有用的，比起 CLI 這種簡單直接的使用方式，組態檔具有更多的靈活性，
考慮到用 CLI 這種方式來運行本地的 webpack 副本并不是特別方便，我們可以設定一個快捷方式，調整 package.json 檔案內容如下：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"jquery": "^3.5.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
現在，可以使用 npm run build 命令，來替代我們之前使用的 npx 命令，
現在運行 npm run build 命令，然后看看你的腳本別名是否正常運行：
npm run build
在瀏覽器中打開 dist 目錄下的 index.html，如果一切正常，你應該能看到以下紅色文本：'Hello,Webpack!'，
現在由 webpack 將我們自己寫的 index.js 和 jQuery 打包到了 dist/main.js ，然后由我們手寫的 dist/index.html 進行參考，如果你不想寫 index.html 接下來介紹一個插件，可以大大解放你的雙手，
npm install --save-dev html-webpack-plugin
HtmlWebpackPlugin：該插件將為你生成一個 HTML5 檔案， 其中包括使用 script 標簽的 body 中的所有 webpack 包， 只需添加插件到你的 webpack 配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: resolve(__dirname, 'dist'),
},
plugins: [new HtmlWebpackPlugin()],
mode: 'development'
};
這將會產生一個包含以下內容的檔案 dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
現在運行 npm run build 命令：
npm run build
在瀏覽器中打開 dist 目錄下的 index.html，如果一切正常，你應該 看不到 紅色文本：'Hello,Webpack!'，
因為，這是由插件自動生成的 index.html 自然是沒有 <h1>Hello,Webpack!</h1>，那能不能指定咱們自己寫的一個 index.html 作為這個生成的模板，當然也是可以的，只需要如下修改：
webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
當然了，我們也需要在 src 下創建一個我們自己的模板，它默認創建的，可能有時候并不適合我們，這時候，我們可以指定：
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h1>Hello,Webpack!</h1>
</body>
</html>
現在運行 npm run build 命令：
npm run build
在瀏覽器中打開 dist 目錄下的 index.html，如果一切正常，你應該能看到紅色文本：'Hello,Webpack!'，
第二章 Webpack4資源管理
2.1、處理樣式資源
- 處理css樣式檔案
- 處理less樣式檔案
- 處理sass樣式檔案
第一步：安裝處理器loader
npm install --save-dev style-loader css-loader less-loader less sass-loader node-sass
第二步：引入處理器loader
webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: resolve(__dirname, 'dist'),
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
// 處理less樣式
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
第三步：驗證處理器是否作業
在 src 目錄下，創建 style.css ，檔案內容如下：
h2{color: blueviolet;}
在 src 目錄下，創建 style.less ，檔案內容如下：
h3{color: pink;}
在 src 目錄下，創建 style.scss ，檔案內容如下：
h4{color: orange;}
在 src 目錄下，修改 index.js ，檔案內容如下：
// 匯入剛才下載的jQuery庫
import $ from 'jquery';
// 匯入css樣式
import './style.css';
// 匯入less樣式
import './style.less';
// 匯入sass樣式
import './style.scss';
// 為h1大標題美化樣式
$('h1').css('color', 'red');
在 src 目錄下，修改 index.html ，檔案內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h1>Hello,Webpack jquery!</h1>
<h2>Hello,Webpack css!</h2>
<h3>Hello,Webpack less!</h3>
<h4>Hello,Webpack sass!</h4>
</body>
</html>
第四步：測驗輸出效果
運行命令 npm run build 重新進行打包，然后打開 dist/index.html ，如果一切正常，那么您的頁面效果看起來應該如下：
現在我們發現 webpack 可以處理css、less、sass資源了，但是，經過處理后的樣式是使用 style 標簽行內到 html 中，如果每一個樣式非常的大，那么頁面的加載速度就會大大降低，為了解決這個問題，我們需要把每一種樣式檔案單獨抽取出來，首先處理瀏覽器的兼容性，然后將處理后的樣式檔案經過壓縮處理并匯出為不同的檔案，這樣的處理才是有效的，接下來我們就這個問題進行探討，
- 處理瀏覽器的兼容性問題
- 壓縮css、less、sass樣式
- 抽取css、less、sass樣式
第一步：安裝兼容處理器loader和壓縮、抽取插件
npm install --save-dev postcss-loader postcss-preset-env optimize-css-assets-webpack-plugin mini-css-extract-plugin
第二步：引入處理器loader
webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 設定nodejs環境變數，開發模式下需要設定為 development
process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: resolve(__dirname, 'dist'),
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] /* 用于處理css兼容性問題 */
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash].css'
})
],
mode: 'development'
};
第三步：在 package.json 中需要設定兼容瀏覽器的版本
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"jquery": "^3.5.1",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}
第四步：測驗輸出效果
運行命令 npm run build 重新進行打包，然后打開 dist/index.html ，如果一切正常，那么您的頁面效果看起來應該如下：
而您的樣式檔案看起來應該是這樣的：
做到這里，你可以說已經掌握了處理css、less、sass的核心知識了，我們注意一下 dist 目錄，隨著代碼的修改，以及檔案的增多，有些檔案是舊檔案，我們可以在每一次打包之前手動洗掉一次，但是太麻煩了，所以這里推薦一款清理插件，它會在每次打包發布之前，都會將目標生成目錄進行清理，因此，我們需要安裝一款插件：
npm install --save-dev clean-webpack-plugin
webpack.config.js
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 設定nodejs環境變數，開發模式下需要設定為 development
process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: resolve(__dirname, 'dist'),
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] /* 用于處理css兼容性問題 */
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
plugins: [
// 清理舊打包資源插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash].css'
})
],
mode: 'development'
};
2.2、處理腳本資源
我們對腳本主要是進行以下幾個方面的處理：
- 對不同模塊的 js 代碼進行合并打包（Webpack會自動對js和json檔案進行打包，此步忽略）
- 對不同模塊的 js 代碼進行語法檢查
- 對不同模塊的 js 代碼進行兼容性處理
- 對不同模塊的 js 代碼進行壓縮抽取
第一步：安裝處理器loader
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
npm install --save-dev babel-loader @babel/core @babel/preset-env core-js
npm install --save-dev uglifyjs-webpack-plugin
第二步：引入處理器loader
webpack.config.js
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境
process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.[contenthash].js',/* 重新指定js輸出檔案路徑 */
path: resolve(__dirname, 'dist'),
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] /* 用于處理css兼容性問題 */
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
// 進行js語法檢查
{
test: /\.js$/i,
loader: 'eslint-loader',
options: {
// 自動修復eslint的錯誤
fix: true
}
},
// 進行js兼容性
{
test: /\.js$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定core-js版本
corejs: { version: 3 },
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
plugins: [
// 清理舊打包資源插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash].css'
}),
// 用于壓縮js腳本代碼
new UglifyjsWebpackPlugin()
],
mode: 'development'
};
第三步：在 package.json 中需要設定語法檢查的規則 airbnb-base
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.2.1",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.7.0",
"css-loader": "^5.0.1",
"eslint": "^7.13.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"html-webpack-plugin": "^4.5.0",
"jquery": "^3.5.1",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.1.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
}
第四步：測驗輸出效果
運行命令 npm run build 重新進行打包，你應該是運行失敗的，因為語法檢查提示：jquery不應該被安裝到開發依賴中，這里我們用最簡單的方法解決，注釋掉，index.js 中所有用到jquery的部分，然后就行了，
重新運行命令 npm run build 重新進行打包，然后打開 dist/index.html ，如果一切正常，那么您的頁面效果看起來應該如下：
2.3、處理影像資源
除了樣式和腳本資源需要處理，我們還得處理影像資源，常見的影像包括以下幾種出現方式：
- 包括樣式中background屬性中的url圖片
- 使用腳本動態添加的img圖片
- 直接寫在頁面中的img圖片
您應該找一張你所喜歡的圖片放到src中，以方便后邊的演示，在這里名稱默認為“myimg.png”
第一步：安裝處理器loader
npm install --save-dev url-loader file-loader html-loader
第二步：參考處理器loader
webpack.config.js
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境
process.env.NODE_ENV = 'development';
const MiniCssExtractPlugin_loader = {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' /* 修正把樣式單獨抽取到一個目錄中出現的屬性圖片路徑報錯 */
}
};
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.[contenthash].js',/* 重新指定js輸出檔案路徑 */
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader'] /* 用于處理css兼容性問題 */
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
// 進行js語法檢查
{
test: /\.js$/i,
loader: 'eslint-loader',
options: {
// 自動修復eslint的錯誤
fix: true
}
},
// 進行js兼容性
{
test: /\.js$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定core-js版本
corejs: { version: 3 },
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
// 進行樣式屬性、腳本添加影像的處理
{
test: /\.(png|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
limit: 10 * 1024,// 圖片大小小于10kb，就會被base64處理
esModule: false,// 解決：關閉url-loader的es6模塊化，使用commonjs決議
outputPath: 'images', // 將檔案打包到哪里
name: '[hash].[ext]'// 給圖片進行重命名
}
},
// 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
{
test: /\.html$/i,
loader: 'html-loader'
}
]
},
plugins: [
// 清理舊打包資源插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash].css'
}),
// 用于壓縮js腳本代碼
new UglifyjsWebpackPlugin()
],
mode: 'development'
};
第三步：驗證處理器是否作業
在 src 目錄下，修改 style.css ，檔案內容如下：
h2 {
width: 151px;
height: 151px;
background: url('./myimg.png') no-repeat;
}
在 src 目錄下，修改 style.less ，檔案內容如下：
h3 {
width: 151px;
height: 151px;
background: url('./myimg.png') no-repeat;
}
在 src 目錄下，修改 style.scss ，檔案內容如下：
h4 {
width: 151px;
height: 151px;
background: url('./myimg.png') no-repeat;
}
在 src 目錄下，修改 index.js ，檔案內容如下：
import './style.css'; // 匯入css樣式
import './style.less'; // 匯入less樣式
import './style.scss'; // 匯入sass樣式
import MyImg from './myimg.png'; // 匯入一張圖片
const myimg = new Image(); // 創建一張圖片
myimg.src = MyImg;
document.body.append(myimg);
在 src 目錄下，修改 index.html ，檔案內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<p>下邊三張圖片是css、less、sass中引入的：</p>
<h2>hello css!</h2>
<h3>hello less!</h3>
<h4>hello sass!</h4>
<p>下邊這張圖片是html中引入的：</p>
<img src="./myimg.png">
<p>下邊這張圖片是js中引入的：</p>
</body>
</html>
第四步：測驗輸出效果
運行命令 npm run build 重新進行打包，然后打開 dist/index.html ，如果一切正常，那么您的頁面效果看起來應該如下：
2.4、處理字體資源
現在，我們準備了一個fonts檔案夾（配套資料中有），里邊有樣式也有各種字體檔案，我們現在需要對這些資源進行管理，具體怎么做，請往下看，
第一步：安裝處理器loader
file-loader在上一步的時候已經安裝過了，這里就不用安裝了
第二步：參考處理器loader
webpack.config.js
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境
process.env.NODE_ENV = 'development';
const MiniCssExtractPlugin_loader = {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' /* 修正把樣式單獨抽取到一個目錄中出現的屬性圖片路徑報錯 */
}
};
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.[contenthash].js',/* 重新指定js輸出檔案路徑 */
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader'] /* 用于處理css兼容性問題 */
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
// 進行js語法檢查
{
test: /\.js$/i,
loader: 'eslint-loader',
options: {
// 自動修復eslint的錯誤
fix: true
}
},
// 進行js兼容性
{
test: /\.js$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定core-js版本
corejs: { version: 3 },
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
// 進行樣式屬性、腳本添加影像的處理
{
test: /\.(png|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
limit: 10 * 1024,// 圖片大小小于10kb，就會被base64處理
esModule: false,// 解決：關閉url-loader的es6模塊化，使用commonjs決議
outputPath: 'images', // 將檔案打包到哪里
name: '[hash].[ext]'// 給圖片進行重命名
}
},
// 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
{
test: /\.html$/i,
loader: 'html-loader'
},
// 打包字體資源
{
test: /\.(eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'fonts', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
}
]
},
plugins: [
// 清理舊打包資源插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash].css'
}),
// 用于壓縮js腳本代碼
new UglifyjsWebpackPlugin()
],
mode: 'development'
};
第三步：驗證處理器是否作業
在 src 目錄下，修改 index.js ，檔案內容如下：
import './style.css'; // 匯入css樣式
import './style.less'; // 匯入less樣式
import './style.scss'; // 匯入sass樣式
import './fonts/iconfont.css'; // 匯入字體資源
在 src 目錄下，修改 index.html ，檔案內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<span class="iconfont icon-dianzan"></span>
<span class="iconfont icon-pinglun"></span>
<span class="iconfont icon-fenxiang"></span>
<span class="iconfont icon-gengduo"></span>
<span class="iconfont icon-guanbi"></span>
<span class="iconfont icon-shanchu"></span>
</body>
</html>
第四步：測驗輸出效果
運行命令 npm run build 重新進行打包，然后打開 dist/index.html ，如果一切正常，那么您的頁面效果看起來應該如下：
2.5、處理其它資源
其它資源是指除了html、js、json、css、less、sass、(png|jpg|jpeg|gif)、(eot|ttf|svg|woff|woff2)之外的資源，其實我們只需要使用一個 file-loader 就可以解決了，這里就不演示了，直接貼出處理器代碼，請自行復制到指定位置：
// 打包其它資源
{
exclude: /\.(html|js|json|css|less|scss|png|jpg|jpeg|gif|eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'others', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
}
2.6、處理頁面資源
我們需要對頁面資源進行去掉多余空格、注釋，進行壓縮處理，只需要修改一處配置即可，
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,// 清理多余空格
removeComments: true// 移除注釋
}
}),
運行 npm run build ，如果順利，你將會看到以下效果：
2.7、配置開發服務
我們每次寫完代碼，都得需要手動打包，然后再打開 dist/index.html ，即使有一點錯誤，重新修改也需要打包，很不方便有沒有，還有就是有一些技術是需要服務器才能運行，并不支持本地直接打開 html 代碼運行，遇到這種問題，我們也會束手無策，所以，我們需要一款運行在服務器端的插件或者軟體，幸好，webpack 早已想到，如何使用，請看下邊：
npm install --save-dev webpack-dev-server@3.11.0
webpack.config.js 只需要配置 devServer 即可
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境
process.env.NODE_ENV = 'development';
const MiniCssExtractPlugin_loader = {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' /* 修正把樣式單獨抽取到一個目錄中出現的屬性圖片路徑報錯 */
}
};
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.[contenthash].js',/* 重新指定js輸出檔案路徑 */
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader'] /* 用于處理css兼容性問題 */
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
// 進行js語法檢查
{
test: /\.js$/i,
loader: 'eslint-loader',
options: {
// 自動修復eslint的錯誤
fix: true
}
},
// 進行js兼容性
{
test: /\.js$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定core-js版本
corejs: { version: 3 },
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
// 進行樣式屬性、腳本添加影像的處理
{
test: /\.(png|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
limit: 10 * 1024,// 圖片大小小于10kb，就會被base64處理
esModule: false,// 解決：關閉url-loader的es6模塊化，使用commonjs決議
outputPath: 'images', // 將檔案打包到哪里
name: '[hash].[ext]'// 給圖片進行重命名
}
},
// 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
{
test: /\.html$/i,
loader: 'html-loader'
},
// 打包字體資源
{
test: /\.(eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'fonts', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
},
// 打包其它資源
{
exclude: /\.(html|js|json|css|less|scss|png|jpg|jpeg|gif|eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'others', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
}
]
},
plugins: [
// 清理舊打包資源插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,// 清理多余空格
removeComments: true// 移除注釋
}
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash].css'
}),
// 用于壓縮js腳本代碼
new UglifyjsWebpackPlugin()
],
mode: 'development',
// 開發服務器 devServer：用來自動化（自動編譯，自動打開瀏覽器，自動重繪瀏覽器）
// 特點：只會在記憶體中編譯打包，不會有任何輸出
// 啟動devServer指令為：npx webpack-dev-server
devServer: {
// 專案構建后路徑
contentBase: resolve(__dirname, 'dist'),
// 啟動gzip壓縮
compress: true,
// 埠號
port: 3000,
// 自動打開瀏覽器
open: true
}
};
運行 npx webpack-dev-server ，如果順利，你將會看到以下效果：
第三章 Webpack4環境配置
3.1、開發環境配置
安裝依賴
npm install --save-dev style-loader css-loader less-loader less sass-loader node-sass
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
npm install --save-dev babel-loader @babel/core @babel/preset-env core-js
npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev url-loader file-loader html-loader
npm install --save-dev webpack-dev-server@3.11.0
webpack.config.js
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境
process.env.NODE_ENV = 'development';
const MiniCssExtractPlugin_loader = {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' /* 修正把樣式單獨抽取到一個目錄中出現的屬性圖片路徑報錯 */
}
};
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// 進行js語法檢查
{
test: /\.js$/i,
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個，減少了打包時間
oneOf: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader']
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
// 進行js兼容性
{
test: /\.js$/i,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
// 進行樣式屬性、腳本添加影像的處理
{
test: /\.(png|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
limit: 10 * 1024,
esModule: false,
outputPath: 'images',
name: '[hash].[ext]'
}
},
// 處理html檔案的img圖片
{
test: /\.html$/i,
loader: 'html-loader'
},
// 打包字體資源
{
test: /\.(eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'fonts', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
},
// 打包其它資源
{
exclude: /\.(html|js|json|css|less|scss|png|jpg|jpeg|gif|eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'others', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'dist'),
compress: true,
port: 3000,
open: true,
hot: true
},
devtool: 'eval-source-map'
};
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"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
3.2、生產環境配置
安裝依賴
npm install --save-dev style-loader css-loader less-loader less sass-loader node-sass
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
npm install --save-dev babel-loader @babel/core @babel/preset-env core-js
npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev url-loader file-loader html-loader
npm install --save-dev webpack-dev-server@3.11.0
npm install --save-dev thread-loader
npm install --save-dev workbox-webpack-plugin
具備功能
- 壓縮樣式（css、less、sass），對樣式進行了兼容性處理
- 壓縮腳本（js），對腳本進行了兼容性處理以及語法檢查
- 壓縮頁面（html），對頁面進行了空白字符以及注釋去除處理
- 根據內容哈希快取樣式檔案、腳本檔案、其它資源檔案
- 添加了離線pwa訪問技術
- 添加了多執行緒打包，提高打包速度
- 添加了source-map查錯機制
webpack.config.js
const { resolve } = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境
process.env.NODE_ENV = 'production';
const MiniCssExtractPlugin_loader = {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' /* 修正把樣式單獨抽取到一個目錄中出現的屬性圖片路徑報錯 */
}
};
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',/* 重新指定js輸出檔案路徑 */
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// 進行js語法檢查
{
test: /\.js$/i,
loader: 'eslint-loader',
options: {
// 自動修復eslint的錯誤
fix: true
}
},
{
oneOf: [
// 處理css樣式
{
test: /\.css$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader']
},
// 處理less樣式
{
test: /\.less$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'less-loader']
},
// 處理sass樣式
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin_loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
// 進行js兼容性
{
test: /\.js$/i,
exclude: /node_modules/,
use: [
/**
* 開啟多行程打包
* 行程啟動大概為600ms，行程通信也有開銷
* 只有作業消耗時間比較長，才需要多行程打包
*/
{
loader: 'thread-loader',
options: {
workers: 2 // 開啟2個行程進行打包，加快打包速度
}
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定core-js版本
corejs: { version: 3 },
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
// 開啟babel快取，第二次構建時，會讀取之前的快取
cacheDirectory: true
}
}
]
},
// 進行樣式屬性、腳本添加影像的處理
{
test: /\.(png|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
limit: 10 * 1024,// 圖片大小小于10kb，就會被base64處理
esModule: false,// 解決：關閉url-loader的es6模塊化，使用commonjs決議
outputPath: 'images', // 將檔案打包到哪里
name: '[hash].[ext]'// 給圖片進行重命名
}
},
// 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
{
test: /\.html$/i,
loader: 'html-loader'
},
// 打包字體資源
{
test: /\.(eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'fonts', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
},
// 打包其它資源
{
exclude: /\.(html|js|json|css|less|scss|png|jpg|jpeg|gif|eot|ttf|svg|woff|woff2)$/i,
loader: 'file-loader',
options: {
outputPath: 'others', // 將檔案打包到哪里
name: '[hash].[ext]'// 給檔案進行重命名
}
}
]
}
]
},
plugins: [
// 清理舊打包資源插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,// 清理多余空格
removeComments: true// 移除注釋
}
}),
// 用于壓縮css樣式檔案
new OptimizeCssAssetsWebpackPlugin(),
// 用于提取css樣式檔案
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:10].css'
}),
// 用于壓縮js腳本代碼
new UglifyjsWebpackPlugin(),
// 漸進式網路開發應用程式，離線可訪問
new WorkboxWebpackPlugin.GenerateSW({
/**
* 1. 幫助 serviceworker 快速啟動
* 2. 洗掉舊的 serviceworker，生成一個 serviceworker 組態檔
*/
clientsClaim: true,
skipWaiting: true
})
],
/**
* 1. 可以將node_modules中代碼單獨打包一個chunk最終輸出
* 2. 自動分析多入口chunk中，有沒有公共的檔案，如果有會打包成單獨一個chunk
*/
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production',
devtool: 'source-map'
};
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"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
},
"sideEffects": [
"*.css",
"*.less",
"*.scss"
]
index.js 最后添加以下資訊
// 注冊serviceWorker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(() => {
console.log('sw注冊成功了~');
}).catch(() => {
console.log('sw注冊失敗了~');
});
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226251.html
標籤：其他