本節課的**目錄如下：
本節課的package.json內容如下：
}
extracttextplugin外掛程式。在專案的入口檔案需要引入style-loader和css-loader:
import "style-loader/lib/addstyles";
import "css-loader/lib/css-base";
import "./assets/fonts/iconfont.css";
借助url-loader，可以識別並且處理eot、woff等結尾的字型檔案。同時，根據字型檔案大小，可以靈活配置是否進行base64編碼。下面的 demo 就是當檔案大小小於5000b的時候，進行base64編碼。
// webpack.config.js
const path = require("path");
const extracttextplugin = require("extract-text-webpack-plugin");
let extracttextplugin = new extracttextplugin();
module.exports = ,
output: ,
module: ,
use: []})
},}]}
]},
plugins: [extracttextplugin]
};
css和js均位於/src/dist/資料夾下。因此，需要在index.html中引入這兩個檔案（假設已經打包完畢）：
document
cmd中執行webpack進行打包，打包結果如下：
在 chrome 中開啟index.html，字型檔案被正確引入：
webpack4 系列教程 十一 字型檔案處理
本節課的 目錄如下 本節課的package.json內容如下 複製 為了提取 css 樣式到單獨檔案，需要用到extracttextplugin外掛程式。在專案的入口檔案需要引入style loader和css loader import style loader lib addstyles imp...
webpack4系列第四發
在webpack4中的hmr配置及其簡單，如下所示即可 const webpack require webpack module.exports src index.js 入口檔案 import style.css 這樣當我們的css檔案更新的時候，就會自動替換所更新的。需要注意的是，這裡css的自...
webpack4 系列教程 一 打包JS
webpack 本身就是為了打包js所設計，作為第一節，介紹怎麼打包js。webpack支援es6,commonjs,amd。建立vendor資料夾，其中minus.js multi.js和sum.js分別用 commonjs amd 和 es6 規範編寫。vendor 資料夾 位址 es6 imp...