webpack4系列教程（三）：自動生成項目中的HTML文件

時間 2019-12-13

標籤 webpack4 webpack 系列教程自動生成項目 html 文件欄目 HTML 简体版

原文原文鏈接

1. webpack中的CommonJS和ES Mudule 規範

1.1 CommonJs規範

CommonJs規範的出發點：JS沒有模塊系統、標準庫較少、缺少包管理工具；爲了讓JS能夠在任何地方運行，以達到Java、PHP這些後臺語言具有開發大型應用的能力。html

在CommonJs規範中：webpack

一個文件就是一個模塊，擁有單獨的做用域；
普通方式定義的變量、函數、對象都屬於該模塊內；
經過require來加載模塊；
經過exports和modul.exports來暴露模塊中的內容；

1.2 ES Mudule 規範

ES6在語言標準的層面上，實現了模塊功能，基本特色以下：git

每個模塊只加載一次，每個JS只執行一次，若是下次再去加載同目錄下同文件，直接從內存中讀取；
每個模塊內聲明的變量都是局部變量，不會污染全局做用域；
模塊內部的變量或者函數能夠經過export導出；
一個模塊能夠導入別的模塊；

模塊功能主要由兩個命令構成：export和import；export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能：github

// esm.js
let firstName = 'Jack';
let lastName = 'Wang';

export {firstName, lastName}

// export命令除了輸出變量，還能夠輸出函數
export function (a, b) {
  return a + b
}

使用export命令定義了模塊的對外接口之後，其餘 JS 文件就能夠經過import命令加載這個模塊，import命令接受一對大括號，裏面指定要從其餘模塊導入的變量名，大括號裏面的變量名，必須與被導入模塊對外接口的名稱相同。web

// main.js
import {firstName, lastName} from './esm';

function say() {
  console.log('Hello , ' + firstName + ' ' + lastName)
}

1.3 使用

如今，在src目錄下新建 sum.js 和 minus.jschrome

// 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 npm

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 文件夾已被刪除了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。