學習webpack4 - HTML處理

學習webpack4 - 基礎配置
學習webpack4 - HTML處理
學習webpack4 - 樣式處理
學習webpack4 - ES6語法轉化
學習webpack4 - 第三方庫的使用
學習webpack4 - 抽離公共代碼

...持續中

=======================================================

HTML處理

有些時候，咱們項目裏的html一開始沒有建立，可是打包的時候呢但願自動生成html入口頁面而且這個html文件能夠自動引入打包後的JS文件等，並且這個html文件自動被放到打包後的目錄中，這種狀況下怎麼經過webpack配置呢？

注意：開始以前如下內容以前，須要配置一些webpack的基礎配置，傳送門：學習webpack4.x - 基礎配置

安裝插件

安裝自動生成html文件須要的插件： webpack-html-plugin，它能夠簡化html文件的建立。

yarn add webpack-html-plugin -D

自動生成html

當前目錄以下：

下面開始配置webpack.config.js文件：

打開webpack.config.js文件， 引入 webpack-html-plugin 插件，而且在plugin中配置該插件：

let HtmlWebpackPlugin = require('html-webpack-plugin');

//插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //打包後的文件名稱
    })
  ]

嘗試運行：

npm run dev

成功！運行後自動生成了build目錄，而且在build目錄中自動生成了index.html文件，結果以下：

打包後的目錄:

瀏覽器中：

webpack-html-plugin 經常使用配置選項

• title: 用於生成的HTML文檔的標題
• filename: 要將HTML寫入的文件, 默認index.html
• template: webpack須要模板的路徑

• inject: 默認值true

  • true 或 body: 將腳本放在body底部。
  • head: 將腳本放在head元素中。
• favicon: 將給定的favicon路徑添加到輸出HTML
• meta: 容許注入meta-tags
• minify: 縮小輸出
• hash: 若是webpack爲全部包含的腳本和CSS文件附加惟一的編譯哈希，對緩存清除頗有用。

minify配置：

//插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //打包後的文件名稱
      minify: {
        collapseWhitespace: true //摺疊空行
      }
    })
  ]

效果：

hash配置：

//插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //打包後的文件名稱
      hash: true, //hash
    })
  ]

效果：

清理編譯後的文件

webpack編譯後生成的文件會存放在固定的目錄下，時間久了這個目錄會至關雜亂，咱們利用clean-webpack-plugin 這個插件在每次編譯的時候先刪掉這個目錄，而後在去生成最新的這個目錄，這樣就能夠保證每次這個目錄下的文件都是最新的，並且不包含老的編譯的文件遺留下來，方法以下：

step1: 配置webpack.config.js

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

module.exports = {
  //...

  plugins: [
    new CleanWebpackPlugin(['dist'])  //dist是出口目錄名稱
  ]
}

step2: 安裝插件

yarn add clean-webpack-plugin -D