1. webpack中的CommonJS和ES Mudule 規(guī)范
1.1 CommonJs規(guī)范
CommonJs規(guī)范的出發(fā)點(diǎn)：JS沒有模塊系統(tǒng)、標(biāo)準(zhǔn)庫較少饲梭、缺乏包管理工具险绘；為了讓JS可以在任何地方運(yùn)行玉雾，以達(dá)到Java跨算、PHP這些后臺語言具備開發(fā)大型應(yīng)用的能力。
在CommonJs規(guī)范中：
- 一個文件就是一個模塊鹉究，擁有單獨(dú)的作用域宇立；
- 普通方式定義的變量、函數(shù)自赔、對象都屬于該模塊內(nèi)妈嘹；
- 通過require來加載模塊；
- 通過exports和modul.exports來暴露模塊中的內(nèi)容绍妨；
1.2 ES Mudule 規(guī)范
ES6在語言標(biāo)準(zhǔn)的層面上润脸，實(shí)現(xiàn)了模塊功能，基本特點(diǎn)如下：
- 每一個模塊只加載一次他去， 每一個JS只執(zhí)行一次津函， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀裙乱场；
- 每一個模塊內(nèi)聲明的變量都是局部變量涩馆， 不會污染全局作用域行施；
- 模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出允坚；
- 一個模塊可以導(dǎo)入別的模塊；
模塊功能主要由兩個命令構(gòu)成：export和import蛾号；export命令用于規(guī)定模塊的對外接口稠项，import命令用于輸入其他模塊提供的功能：
// esm.js
let firstName = 'Jack';
let lastName = 'Wang';
export {firstName, lastName}
// export命令除了輸出變量，還可以輸出函數(shù)
export function (a, b) {
return a + b
}
使用export命令定義了模塊的對外接口以后鲜结，其他 JS 文件就可以通過import命令加載這個模塊展运，import命令接受一對大括號，里面指定要從其他模塊導(dǎo)入的變量名精刷，大括號里面的變量名拗胜，必須與被導(dǎo)入模塊對外接口的名稱相同。
// main.js
import {firstName, lastName} from './esm';
function say() {
console.log('Hello , ' + firstName + ' ' + lastName)
}
1.3 使用
現(xiàn)在怒允，在src目錄下新建 sum.js 和 minus.js
// sum.js ES Mudule 規(guī)范
// export default命令埂软，為模塊指定默認(rèn)輸出
export default function (a, b) {
return a + b
}
// minus.js commonJS 規(guī)范
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))
執(zhí)行 npm run build 之后，打開 index.html纫事，在控制臺中可以看到輸出的結(jié)果勘畔。
?
2. 自動生成項(xiàng)目中的HTML文件
在前文中我們?yōu)榱搜菔敬虬玫?main.bundle.js ，在根目錄下創(chuàng)建了一個 index.html 丽惶，并引入main.bundle.js炫七。而在實(shí)際項(xiàng)目中，我們可以通過 webpack 的一個插件：HtmlWebpackPlugin 來自動生成HTML文件并引入我們打包好的JS和CSS文件钾唬。
安裝：
npm install --save-dev html-webpack-plugin
整理項(xiàng)目目錄：
在根目錄創(chuàng)建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：設(shè)為 true 表示把JS文件注入到body結(jié)尾，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>
執(zhí)行 npm run build 乍桂，可以看到冲杀，dist 目錄下多了一個 index.html，這就是通過 HtmlWebpackPlugin 生成的文件睹酌，打開dist/index.html权谁，已經(jīng)自動引入了 main.bundle.js并且注釋已被刪除。
?
至此憋沿，我們已經(jīng)成功實(shí)現(xiàn)自動生成項(xiàng)目中的HTML文件了旺芽。
3. 清理/dist文件夾
每次執(zhí)行npm run build 打包時，都會有上次的代碼遺留下來，導(dǎo)致我們的 /dist 文件夾相當(dāng)雜亂采章。通常运嗜，在每次構(gòu)建前清理 /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, '../')})
第一個參數(shù)表示文件夾路徑數(shù)組；第二個參數(shù)是 options 配置項(xiàng)抵怎，root 為到webpack根文件夾的絕對路徑奋救，默認(rèn)為 __dirname，由于dist文件夾和webpack.config.js不再相同目錄下反惕，因此我們需要重新定義 root 路徑尝艘，以免無法找到 dist 文件夾。
執(zhí)行 npm run build 承璃，在命令行中可見：
?
dist 文件夾已被刪除了利耍。
