在開始教程前，先看看我們通過本教程能學到什么。
目錄
1 小試牛刀
1.1 創建并初始化項目
1.2 創建目錄及文件
1.3 修改package.json
1.4 編寫項目代碼
1.5 配置webpack.config.js
1.6 測試打包
2 搭建基礎架構
2.1 實現每次編譯前自動清空dist目錄
2.2 實現從html模板自動生成最終html
2.3 構建項目
3 搭建開發環境的熱監測服務器
3.1 安裝webpack-dev-server
3.2 使用source-map追蹤源代碼錯誤
4 分離生產環境和開發環境的配置文件
5 集成公用JS庫（以jQuery為例）
5.1 安裝并集成jQuery
5.2 全局應用jQuery
5.3 使用jQuery
5.4 單獨打包jQuery
6 兼容IE8處理方式
6.1 解決IE8“缺少標識符”錯誤
6.2 解決ES6轉ES5
6.3 解決IE8“對象不支持bind屬性方法”錯誤
7 CSS及Stylus的使用
7.1 加載CSS和Stylus
7.2 分離樣式到css文件
7.3 優化分離css公用樣式
8 使用ejs將html模塊化
9 加載圖片資源
9.1 css加載圖片
9.2 html加載圖片
9.3 解決css和html中引用圖片路徑不一致的問題
10 加載iconfont
11 使用cnpm加速下載
1 小試牛刀
1.1 創建并初始化項目
找個喜歡的目錄，執行以下命令：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
1.2 創建目錄及文件
※注：本文代碼區域每行開頭的 “+”表示新增，“-或者D”表示刪除，“M”表示修改，“...”表示省略。
dist為最終編譯出來的生產環境代碼，src為開發環境代碼。
/- webpack-demo
|- package.json
+ |- /dist
+ |- index.html
+ |- /src
+ |- index.js
1.3 修改package.json
調整 package.json 文件，以便確保我們安裝包是私有的(private)，并且移除 main 入口。這可以防止意外發布你的代碼。
同時加入script命令，讓執行npx webpack 等同于執行npm run build。
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack --mode production",
+ "dev": "webpack --mode development"
},
...
1.4 編寫項目代碼
編寫dist/index.html，注意引入bundle.js（打包時會自動生成bundle.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Demo</title>
<script src="bundle.js"></script>
</head>
<body>
</body>
</html>
編寫src/index.js，隨便寫點。
document.write('hello world');
1.5 配置webpack.config.js
項目根目錄創建webpack.config.js，用來配置webpack。
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
+ |- webpack.config.js
編寫webpack.config.js：
const path = require('path');
module.exports = {
// 入口js路徑
entry: './src/index.js',
// 編譯輸出的js及路徑
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
1.6 測試打包
執行npm run build，生成的dist如下：
|- /dist
|- index.html
+ |- bundle.js
瀏覽器運行index.html，顯示“hello world”。
以上是最原始的方式，需要在dist配置html，這樣并不科學。我們需要實現的是在src里開發，然后全部生成到dist中。請繼續后面的章節。
2 搭建基礎架構
2.1 實現每次編譯前自動清空dist目錄
安裝clean-webpack-plugin，設置代碼見2.3
npm install clean-webpack-plugin --save-dev
2.2 實現從html模板自動生成最終html
安裝html-webpack-plugin，設置代碼見2.3
npm install html-webpack-plugin --save-dev
2.3 構建項目
構建目錄如下
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- /html
|- index.html
|- login.html
|- /js
|- index.js
|- login.js
重新編寫webpack.config.js
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口js路徑
entry: {
index: './src/js/index.js',
login: './src/js/login.js'
},
plugins: [
// 自動清空dist目錄
new CleanWebpackPlugin(),
// 設置html模板生成路徑
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
chunks: ['login']
}),
],
// 編譯輸出配置
output: {
// js生成到dist/js，[name]表示保留原js文件名
filename: 'js/[name].js',
// 輸出路徑為dist
path: path.resolve(__dirname, 'dist')
}
};
現在執行npm run build，生成dist如下：
|- /dist
|- index.html
|- login.html
|- /js
|- index.js
|- login.js
查看html代碼，發現對應的js已經被引入了。
3 搭建開發環境的熱監測服務器
現在我們搭建一個基于nodejs的服務器，讓代碼運行在開發環境，并且實現在修改代碼時不用刷新即可自動熱更新頁面。
3.1 安裝webpack-dev-server
自動監測代碼變化并實時刷新瀏覽器
npm install webpack-dev-server --save-dev
修改package.json：
"scripts": {
"build": "webpack --mode production",
- "dev": "webpack --mode development"
+ "serve": "webpack-dev-server --open --mode development"
},
修改webpack.config.js：
module.exports = {
entry: {...},
+ // 動態監測并實時更新頁面
+ devServer: {
+ contentBase: './dist',
+ // 默認8080，可不寫
+ port: 8080,
+ // 熱更新，無需刷新
+ hot: true
+ },
plugins: [...],
...
};
執行npm run serve，會在本地啟動一個nodejs的web服務，瀏覽器會自動打http://localhost:8080/。
通過http://localhost:8080/login.html可以訪問login頁面。
這時修改src下的js或者html文件，頁面會自動更新。
3.2 使用source-map追蹤源代碼錯誤
在編譯生成的dist目錄中，js代碼已被重新混淆，如果出現錯誤，無法將錯誤正確定位到原始代碼的對應位置，這樣不方便調試生成環境的代碼。如果需要精確調試生產環境代碼，可通過source-map實現。（如果不需要此功能，可以跳過本節）
修改webpack.config.js：
inline-source-map: 將source map 轉換為 DataUrl 后添加到頁面的js中，生成的js文件較大（不推薦）
source-map: 生成對應的map文件，js較小，但是需要服務器設置不允許訪問map文件（推薦）
module.exports = {
...
devServer: {...},
+ // 方便追蹤源代碼錯誤
+ devtool: 'source-map',
plugins: [...],
..
};
4 分離生產環境和開發環境的配置文件
webpack.config.js包含了生產環境和開發環境的配置，分離后，有利于代碼的維護。
安裝webpack-merge插件
使用裝webpack-merge來實現拆分。
npm install webpack-merge --save-dev
拆分webpack.config.js
新建以下3個文件：
webpack.common.js （公共配置）
webpack.dev.js （開發環境配置）
webpack.prod.js （生產環境配置）
將webpack.config.js代碼拆分后，可刪除webpack.config.js。
|- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
|- /dist
|- /src
webpack.common.js保留公共配置的代碼
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {...},
plugins: [...],
output: {...}
};
webpack.dev.js保留開發環境配置的代碼
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
// 動態監測并實時更新頁面
devServer: {
contentBase: './dist',
// 默認端口8080，可不填
port: 8080,
// 熱更新，無需刷新
hot: true
}
});
webpack.prod.js保留生產環境配置的代碼
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
// 方便追蹤源代碼錯誤
//（如果不需要3.2小節的追蹤功能，可以注釋掉下行代碼）
devtool: 'source-map'
});
修改package.json：
"scripts": {
M "build": "webpack --config webpack.prod.js --mode production",
M "serve": "webpack-dev-server --open --config webpack.dev.js --mode development"
},
5 集成公用JS庫（以jQuery為例）
本節以jQuery為例，講解如何引入公用JS庫。如果使用AngularJS、React或者Vue，建議使用官方的CLI工具。
5.1 安裝并集成jQuery
安裝jQuery：
npm install jquery --save
5.2 全局應用jQuery
jQuery是每個頁面都要用的，在每個頁面import太過于繁瑣，修改webpack.common.js進行全局配置:
...
+ const webpack = require('webpack');
module.exports = {
...
plugins: [
+ new webpack.ProvidePlugin({
+ $: 'jquery',
+ jQuery: 'jquery'
+ }),
new CleanWebpackPlugin(),
...
5.3 使用jQuery
修改src/html/index.html，加入div，用于測試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Demo</title>
</head>
<body>
<div id="app">
<div id="info"></div>
</div>
</body>
</html>
修改src/js/index.js:
$('#info').text('jQuery正常使用');
執行npm run build，生成dist如下：
|- /dist
|- index.html
|- login.html
|- /js
|- index.js <--jQuery代碼已集成到這里
|- login.js
login.js沒有jQuery代碼是因為login.js里暫時還沒用到jQuery，webpack的打包機制是“確實使用了”才會被真正打包進去。
如果我們的項目有很多html靜態頁，每個js都集成了jQuery，而且jQuery代碼基本不會變動，這樣就導致js文件冗余，我們可以把jQuery單獨打包出來，可以方便瀏覽器緩存，減少請求的js大小。
5.4 單獨打包jQuery
使用webpack的splitChunks來實現單獨打包。
修改webpack.common.js：
plugins: [
...
// 設置html模板生成路徑
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
M chunks: ['jquery', 'index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
M chunks: ['jquery', 'login']
}),
],
+ optimization: {
+ splitChunks: {
+ cacheGroups: {
+ commons: {
+ test: /jquery/,
+ name: 'jquery',
+ chunks: 'all'
+ }
+ }
+ }
+ },
// 編譯輸出配置
output: {...}
執行npm run build，頁面運行正常，生成dist如下：
|- /dist
|- index.html
|- login.html
|- /js
|- index.js
|- login.js
+ |- jquery.js <--jQuery已獨立出來
6 兼容IE8處理方式
如果要兼容IE8等低版本瀏覽器，在開發過程中使用ES6等高版本js語法，會導低版本瀏覽器無法運行。另外，jQuery只能使用1.x，要安裝低版本jQuery。(如果不需要兼容IE8，請直接跳過本章節)
首先，先安裝兼容IE6~8的jQuery。
npm install jquery-1x --save
修改webpack.common.js:
...
plugins: [
new webpack.ProvidePlugin({
M $: 'jquery-1x',
M jQuery: 'jquery-1x'
}),
...
6.1 解決IE8“缺少標識符”錯誤
現在build出來的代碼，IE8會在e.default代碼處報錯“缺少標識符”。需要安裝uglifyjs-webpack-plugin。
npm install uglifyjs-webpack-plugin --save-dev
修改webpack.common.js
...
+ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...
optimization: {
splitChunks: { ... },
+ minimizer: [
+ new UglifyJsPlugin({
+ uglifyOptions: {
+ ie8: true
+ }
+ })
+ ]
},
6.2 解決ES6轉ES5
如果使用ES6語法，例如箭頭函數，build會報錯不通過。要把ES6轉為ES5，需要安裝以下插件（較多）：
babel-loader
@babel/core
@babel/preset-env
@babel/plugin-transform-runtime
@babel/plugin-transform-modules-commonjs
@babel/runtime
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install @babel/plugin-transform-runtime @babel/plugin-transform-modules-commonjs --save-dev
npm install @babel/runtime --save
修改webpack.common.js，這里代碼的作用是，在編譯時把js文件中ES6轉成ES5:
optimization: {...},
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /(node_modules|bower_components)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env'],
+ plugins: [
+ '@babel/plugin-transform-runtime',
+ '@babel/plugin-transform-modules-commonjs'
+ ]
+ }
+ }
+ }
+ ]
+ },
// 編譯輸出配置
output: {...}
現在執行npm run build，編譯通過。但是IE8下報錯“對象不支持bind屬性方法”，這是因為IE8不支持ES5，還需要引入es5-shim和es5-sham（見下節）。
6.3 解決IE8“對象不支持bind屬性方法”錯誤
嘗試了很多網上的方法，都沒有嘗試成功，最后干脆用直接引用的方法來解決。
下載插件
先去官網 https://github.com/es-shims/es5-shim/
下載es5-shim.min.js和es5-sham.min.js
在src下創建static目錄，用于存放靜態資源，通過使用CopyWebpackPlugin讓static不被打包，直接copy到dist目錄下。
|- /src
|- /css
(略)
|- /html
|- index.html
|- login.html
|- /js
(略)
|- /static
|- /js
|- es5-shim.min.js
|- es5-sham.min.js
然后，在src/html/index.html和src/html/login.html的<head>里直接引入
<head>
<meta charset="UTF-8">
<title>>Webpack Demo</title>
+ <script type="text/javascript" src="static/js/es5-shim.min.js"></script>
</head>
es5-sham.min.js可在以后用到的時候再引入。
安裝插件copy-webpack-plugin
npm install --save-dev copy-webpack-plugin
修改webpack.common.js，代碼作用是將src/static直接copy到dist，并重命名為static。
...
+ const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
...
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
chunks: ['jquery', 'login']
}),
+ new CopyWebpackPlugin([
+ { from: './src/static', to: 'static' }
+ ])
執行npm run build，在IE8下可以愉快的運行啦。
7 CSS及Stylus的使用
7.1 加載CSS和Stylus
本節以Stylus為例，如果使用Sass/Less，可以參考本方法。混用CSS是為了同時掌握CSS使用方法。
安裝相關依賴包：
npm install style-loader css-loader --save-dev
npm install stylus-loader stylus --save-dev
現在src目錄如下：
|- /src
+ |- /css
+ |- /common
+ |- common.css
+ |- frame.css （這個文件@import common.css和reset.css）
+ |- reset.css
+ |- /pages
+ |- index.styl
+ |- login.styl
|- /html
|- index.html
|- login.html
|- /js
（略）
css及styl內的樣式代碼，請自行補充，這里不再展示了。
index.js中引入樣式：
import '../css/common/frame.css';
import '../css/pages/index.styl';
login.js中引入樣式：
import '../css/common/frame.css';
import '../css/pages/login.styl';
修改webpack.common.js：
module.exports = {
...
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ },
+ {
+ test: /\.styl$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ 'stylus-loader'
+ ]
+ },
...
執行build后，樣式代碼會直接打包插入到html文件中。
7.2 分離樣式到css文件
現在我們想把樣式通過link方式引入。
先安裝MiniCssExtractPlugin
npm install mini-css-extract-plugin --save-dev
然后修改webpack.common.js
···
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
...
+ new MiniCssExtractPlugin({
+ filename: 'css/[name].css'
+ }),
new CopyWebpackPlugin([
{ from: './src/static', to: 'static' }
])
],
module: {
rules: [
{
test: /\.css$/,
use: [
+ // 將原來的style-loader替換
M MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.styl$/,
use: [
+ // 將原來的style-loader替換
M MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader'
]
}
···
執行npm run build，生成的dist如下：
|- /dist
|- index.html
|- login.html
+ |- /css
+ |- index.css
+ |- login.css
|- /js
（略）
index.css和login.css都包含了公用樣式，還可以進一步優化，把公用樣式分離出來。
7.3 優化分離css公用樣式
修改webpack.common.js，使用正則，把src/css/common/下的css單獨打包并引用。
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
M chunks: ['style', 'jquery', 'index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
M chunks: ['style', 'jquery', 'login']
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /jquery/,
name: 'jquery',
chunks: 'all'
},
+ styles: {
+ test: /[\\/]common[\\/].+\.css$/,
+ name: 'style',
+ chunks: 'all',
+ enforce: true
+ }
}
}
},
執行npm run build，生成的dist如下：
|- /dist
|- index.html
|- login.html
+ |- /css
+ |- index.css
+ |- login.css
|- style.css <-- 公用css
|- /js
|- index.js
|- login.js
|- jquery.js
|- style.js <-- 怎么會有這個？
發現在dist/js/目錄下會生成一個多余的style.js，并且html也會引用這個多余的js。這是webpack4的bug，從2016年到現在處于open狀態未解決，第三方插件都試過了，目前還沒有解決，期待在webpack5中可以解決。
可以參看：https://github.com/webpack/webpack/issues/1967
網上解決方案中涉及到的第三方插件：
disable-output-webpack-plugin
html-webpack-exclude-assets-plugin
remove-source-webpack-plugin
以上插件N久沒有更新了，在目前最新的webpack4.35.0中都無法使用。
8 使用ejs將html模塊化
如果每個頁面都有一個header，就可以把header抽成html模塊，然后在需要的頁面引入。這里通過ejs來實現。ejs本質還是個html，只不過多了些模板語法。
安裝ejs-loader
npm install ejs-loader --save-dev
以index.html為例，把index.html重命名為index.ejs
修改webpack.common.js，支持ejs：
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html',
+ // 這里將html改成ejs
M template: './src/html/index.ejs',
chunks: ['style', 'jquery', 'index']
}),
...
module: {
rules: [
...
+ {
+ test: /\.ejs/,
+ use: ['ejs-loader'],
+ }
...
創建src/html/components/header/header.ejs
<div id="header" class="G-header">這是公用頭部</div>
在src/html/index.ejs引入即可。
...
<div id="app">
+ <%= require('./components/header/header.ejs')() %>
<div id="info"></div>
</div>
...
9 加載圖片資源
本章節介紹如何在css和html中引用圖片。
安裝插件file-loader和url-loader，url-loader基于file-loader，所以兩個都要安裝。 (也可以只使用file-loader，url-loader在file-loader的基礎上擴展了功能，比如能設置小于多少KB的圖片進行base64轉碼等）。
npm install file-loader url-loader --save-dev
9.1 css加載圖片
修改webpack.common.js
module: {
rules: [
...
+ {
+ test: /\.(png|svg|jpg|gif|webp)$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ // 最終生成的css代碼中,圖片url前綴
+ publicPath: '../images',
+ // 圖片輸出的實際路徑(相對于dist)
+ outputPath: 'images',
+ // 當小于某KB時轉為base64
+ limit: 0
+ }
+ }
+ ]
+ }
...
]
},
在src/images里加入圖片1.jpg
|- /src
|- /css
(略)
|- /html
(略)
+ |- /images
+ |- 1.jpg
|- /js
(略)
|- /static
(略)
在src/css/pages/index.styl加入代碼：
.bg-pic
width: 200px
height: 200px
background: url(../../images/1.jpg) no-repeat
在src/html/index.ejs加入代碼：
<div id="app">
<%= require('./components/header/header.ejs')() %>
<div id="info"></div>
+ <div class="bg-pic"></div>
</div>
執行npm run build，圖片可正常訪問，生成dist目錄如下:
|- /dist
|- /css
(略)
|- /images
+ |- f0a89ff457b237711f8306a000204128.jpg
|- /js
(略)
|- /static
(略)
|- index.html
|- login.html
9.2 html加載圖片
html加載圖片的方式就是img加載圖片，需要提取html中的圖片地址，需要安裝插件html-loader
npm install html-loader --save-dev
在src/images里加入圖片2.jpg
|- /src
|- /css
(略)
|- /html
(略)
|- /images
|- 1.jpg
+ |- 2.jpg
|- /js
(略)
|- /static
(略)
修改webpack.common.js，這樣可以把html中的圖片提取并打包。
module: {
rules: [
...
+ {
+ test: /\.(html)$/,
+ use: {
+ loader: 'html-loader',
+ options: {
+ attrs: ['img:src', 'img:data-src', 'audio:src'],
+ minimize: true
+ }
+ }
+ }
...
在src/html/index.ejs加入代碼：
<div id="app">
<%= require('./components/header/header.ejs')() %>
<div id="info"></div>
<div class="bg-pic"></div>
+ <img src="${require('../images/2.jpg')}" alt="">
</div>
執行npm run build，圖片已可正常訪問，生成dist目錄如下
|- /dist
|- /css
(略)
|- /images
|- f0a89ff457b237711f8306a000204128.jpg
+ |- dab63db25d48455007edc5d81c476076.jpg
|- /js
(略)
|- /static
(略)
|- index.html
|- login.html
但是發現html中img的圖片不能顯示。查看生成的代碼發現：
dist/index.html中<img>的src為../images/xxxx.jpg
dist/css/index.css中background的url也為../images/xxxx.jpg
因為html和css的路徑差了一級，導致路徑不一致。因此需要區分html和css中的圖片路徑。
9.3 解決css和html中引用圖片路徑不一致的問題
修改webpack.common.js，將MiniCssExtractPlugin.loader改為對象的方式：
module: {
rules: [
...
{
test: /\.css$/,
use: [
M {
M loader: MiniCssExtractPlugin.loader,
M options: {
M // css中的圖片路徑增加前綴
M publicPath: '../'
M }
M },
'css-loader'
]
},
{
test: /\.styl$/,
use: [
M {
M loader: MiniCssExtractPlugin.loader,
M options: {
M // css中的圖片路徑增加前綴
M publicPath: '../'
M }
M },
'css-loader',
'stylus-loader'
]
},
...
{
test: /\.(png|svg|jpg|gif|webp)$/,
use: [
{
loader: 'url-loader',
options: {
D // 最終生成的圖片路徑代碼 (刪除)
D // publicPath: '../images', (刪除)
// 圖片輸出的實際路徑
outputPath: 'images',
// 當小于某KB時轉為base64
limit: 0
}
}
]
},
...
再執行npm run build，路徑顯示正常了。
10 加載iconfont
從阿里巴巴圖標網站 https://www.iconfont.cn/ 下載字體和樣式文件，導入到項目中，結構如下：
|- /src
|- /css
|- /common
|- common.css
|- frame.css
+ |- iconfont.css
|- reset.css
|- /pages
|- index.styl
|- login.styl
+ |- /fonts
+ |- iconfont.eot
+ |- iconfont.svg
+ |- iconfont.ttf
+ |- iconfont.woff
+ |- iconfont.woff2
|- /html
(略)
|- /images
(略)
|- /js
(略)
|- /static
(略)
src/css/common/frame.css里要@import "iconfont.css",然后修改iconfont.css中每個字體的路徑。
在src/html/index.ejs里直接使用字體(字體樣式在iconfont網站定義)：
<i class="G-iconfont G-ficon-cart"></i>
修改webpack.common.js，
module: {
rules: [
...
+ {
+ test: /\.(woff|woff2|eot|ttf|svg)$/,
+ use: {
+ loader: 'file-loader',
+ options: {
+ // 保留原文件名和后綴名
+ name: '[name].[ext]',
+ // 輸出到dist/fonts/目錄
+ outputPath: 'fonts',
+ }
+ }
+ }
]
},
執行npm run build， 生成dist目錄如下：
|- /dist
|- /css
(略)
|- /images
(略)
+ |- /fonts
|- iconfont.eot
|- iconfont.svg
|- iconfont.ttf
|- iconfont.woff
|- /js
(略)
|- /static
(略)
|- index.html
|- login.html
沒有生成woff2文件，是因為css中沒有引用。
11 使用cnpm加速下載
npm有時下載速度很慢，可以安裝cnpm，從國內淘寶鏡像下載，執行以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后npm直接替換成cnpm使用。
以上就是基于webpack4.x搭建標準前端工程的技術分享。
歡迎關注我的個人微信公眾號，隨時獲取最新文章_
