webpack4系列教程(三):自動生成專案中的HTML檔案
傳送門:
webpack4系列教程(二):建立專案,打包第一個JS檔案
1. webpack中的CommonJS和ES Mudule 規範
1.1 CommonJs規範
CommonJs規範的出發點:JS沒有模組系統、標準庫較少、缺乏包管理工具;為了讓JS可以在任何地方執行,以達到Java、PHP這些後臺語言具備開發大型應用的能力。
在CommonJs規範中:
- 一個檔案就是一個模組,擁有單獨的作用域;
- 普通方式定義的變數、函式、物件都屬於該模組內;
- 通過require來載入模組;
- 通過exports和modul.exports來暴露模組中的內容;
1.2 ES Mudule 規範
ES6在語言標準的層面上,實現了模組功能,基本特點如下:
- 每一個模組只加載一次, 每一個JS只執行一次, 如果下次再去載入同目錄下同檔案,直接從記憶體中讀取;
- 每一個模組內宣告的變數都是區域性變數, 不會汙染全域性作用域;
- 模組內部的變數或者函式可以通過export匯出;
- 一個模組可以匯入別的模組;
模組功能主要由兩個命令構成:export和import;export命令用於規定模組的對外介面,import命令用於輸入其他模組提供的功能:
// esm.js
let firstName = 'Jack';
let lastName = 'Wang';
export {firstName, lastName}
// export命令除了輸出變數,還可以輸出函式
export function (a, b) {
return a + b
}
使用export命令定義了模組的對外介面以後,其他 JS 檔案就可以通過import命令載入這個模組,import命令接受一對大括號,裡面指定要從其他模組匯入的變數名,大括號裡面的變數名,必須與被匯入模組對外介面的名稱相同。
// main.js import {firstName, lastName} from './esm'; function say() { console.log('Hello , ' + firstName + ' ' + lastName) }
1.3 使用
現在,在src目錄下新建 sum.js 和 minus.js
// sum.js ES Mudule 規範
// export default命令,為模組指定預設輸出
export default function (a, b) {
return a + b
}
// minus.js commonJS 規範
module.exports = function (a, b) {
return a - b
}
修改 main.js
import sum from './sum'
import minus from './minus'
console.log('sum(1, 2): ' + sum(1, 2))
console.log('minus(5, 2): ' + minus(5, 2))
執行 npm run build 之後,開啟 index.html,在控制檯中可以看到輸出的結果。
2. 自動生成專案中的HTML檔案
在前文中我們為了演示打包好的 main.bundle.js ,在根目錄下建立了一個 index.html ,並引入main.bundle.js。而在實際專案中,我們可以通過 webpack 的一個外掛:HtmlWebpackPlugin 來自動生成HTML檔案並引入我們打包好的JS和CSS檔案。
安裝:
npm install --save-dev html-webpack-plugin
整理專案目錄:
在根目錄建立config資料夾,把webpack.config.js移入config,並修改webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
mode: 'none',
entry: {
main: path.join(__dirname, '../src/main.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, '../dist')
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '../index.html'),
inject: true,
minify: {
removeComments: true
}
})
]
}
module.exports = config
- template:模版檔案的路徑,這裡使用根目錄下的index.html檔案;
- inject:設為 true 表示把JS檔案注入到body結尾,CSS檔案注入到head中;
- minify:removeComments: true 表示刪除模版檔案中的註釋,minify還有很多配置可選請自行參閱;
下一步註釋掉index.html 中我們手動引入的 script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Title</title>
</head>
<body>
<!-- <script src="dist/main.bundle.js"></script> -->
</body>
</html>
執行 npm run build ,可以看到,dist 目錄下多了一個 index.html,這就是通過 HtmlWebpackPlugin 生成的檔案,開啟dist/index.html,已經自動引入了 main.bundle.js並且註釋已被刪除。
至此,我們已經成功實現自動生成專案中的HTML檔案了。
3. 清理/dist資料夾
每次執行npm run build 打包時,都會有上次的程式碼遺留下來,導致我們的 /dist
資料夾相當雜亂。通常,在每次構建前清理 /dist
資料夾,是比較推薦的做法。
clean-webpack-plugin
是一個比較普及的管理外掛,讓我們安裝和配置下:
npm install clean-webpack-plugin --save-dev
在webpack.config.js 中使用:
const CleanWebpackPlugin = require('clean-webpack-plugin')
在 plugins 中加入:
new CleanWebpackPlugin(['dist'],{root: path.join(__dirname, '../')})
第一個引數表示資料夾路徑陣列;第二個引數是 options 配置項,root 為到webpack根資料夾的絕對路徑,預設為 __dirname,由於dist資料夾和webpack.config.js不再相同目錄下,因此我們需要重新定義 root 路徑,以免無法找到 dist 資料夾。
執行 npm run build ,在命令列中可見:
dist 資料夾已被刪除了。
本人才疏學淺,不當之處歡迎批評指正。