1. webpack中的CommonJS和ES Mudule 規(guī)范

1.1 CommonJs規(guī)范

CommonJs規(guī)范的出發(fā)點(diǎn)：JS沒(méi)有模塊系統(tǒng)、標(biāo)準(zhǔn)庫(kù)較少、缺乏包管理工具；為了讓JS可以在任何地方運(yùn)行，以達(dá)到Java、PHP這些后臺(tái)語(yǔ)言具備開發(fā)大型應(yīng)用的能力。

在CommonJs規(guī)范中：

一個(gè)文件就是一個(gè)模塊，擁有單獨(dú)的作用域；

普通方式定義的變量、函數(shù)、對(duì)象都屬于該模塊內(nèi)；

通過(guò)require來(lái)加載模塊；

通過(guò)exports和modul.exports來(lái)暴露模塊中的內(nèi)容；

1.2 ES Mudule 規(guī)范

ES6在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，基本特點(diǎn)如下：

每一個(gè)模塊只加載一次， 每一個(gè)JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀取；

每一個(gè)模塊內(nèi)聲明的變量都是局部變量， 不會(huì)污染全局作用域；

模塊內(nèi)部的變量或者函數(shù)可以通過(guò)export導(dǎo)出；

一個(gè)模塊可以導(dǎo)入別的模塊；

模塊功能主要由兩個(gè)命令構(gòu)成：export和import；export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能：

// esm.js

let firstName = 'Jack';

let lastName = 'Wang';

export {firstName, lastName}

// export命令除了輸出變量，還可以輸出函數(shù)

export function (a, b) {

return a + b

}

使用export命令定義了模塊的對(duì)外接口以后，其他 JS 文件就可以通過(guò)import命令加載這個(gè)模塊，import命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名，大括號(hào)里面的變量名，必須與被導(dǎo)入模塊對(duì)外接口的名稱相同。

// 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，在控制臺(tái)中可以看到輸出的結(jié)果。

?

2. 自動(dòng)生成項(xiàng)目中的HTML文件

在前文中我們?yōu)榱搜菔敬虬玫?main.bundle.js ，在根目錄下創(chuàng)建了一個(gè) index.html ，并引入main.bundle.js。而在實(shí)際項(xiàng)目中，我們可以通過(guò) webpack 的一個(gè)插件：HtmlWebpackPlugin 來(lái)自動(dòng)生成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還有很多配置可選請(qǐng)自行參閱；

下一步注釋掉index.html 中我們手動(dòng)引入的 script ：

Title

執(zhí)行 npm run build ，可以看到，dist 目錄下多了一個(gè) index.html，這就是通過(guò) HtmlWebpackPlugin生成的文件，打開dist/index.html，已經(jīng)自動(dòng)引入了 main.bundle.js并且注釋已被刪除。

?

至此，我們已經(jīng)成功實(shí)現(xiàn)自動(dòng)生成項(xiàng)目中的HTML文件了。

3. 清理/dist文件夾

每次執(zhí)行npm run build 打包時(shí)，都會(huì)有上次的代碼遺留下來(lái)，導(dǎo)致我們的 /dist 文件夾相當(dāng)雜亂。通常，在每次構(gòu)建前清理 /dist 文件夾，是比較推薦的做法。

clean-webpack-plugin 是一個(gè)比較普及的管理插件，讓我們安裝和配置下：

npm install clean-webpack-plugin --save-dev

在webpack.config.js 中使用：

const CleanWebpackPlugin = require('clean-webpack-plugin')

在 plugins 中加入：

new CleanWebpackPlugin(['dist'],{root: path.join(__dirname, '../')})

第一個(gè)參數(shù)表示文件夾路徑數(shù)組；第二個(gè)參數(shù)是 options 配置項(xiàng)，root 為到webpack根文件夾的絕對(duì)路徑，默認(rèn)為 __dirname，由于dist文件夾和webpack.config.js不再相同目錄下，因此我們需要重新定義 root 路徑，以免無(wú)法找到 dist 文件夾。

執(zhí)行 npm run build ，在命令行中可見：

?

dist 文件夾已被刪除了。

傳送門：

總結(jié)

以上是生活随笔為你收集整理的c 自动生成html文件,webpack4系列教程（三）：自动生成项目中的HTML文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。