webpack（四）自動化生成html檔案

1、安裝html-webpack-plugin插件

（1）npm安裝

輸入指令：npm install html-webpack-plugin --save-dev

如果出錯就換成該指令：cnpm i --save-dev [email protected]

（根據經驗使用第一條指令容易出錯，建議使用第二條指令）

（2）淘寶鏡像安裝

輸入指令：cnpm install html-webpack-plugin --save-dev（注：此種添加依賴的方法容易出錯，建議輸入指令：cnpm i --save-dev [email protected]）

2、在webpack.config.js引入html-webpack-plugin插件

const path = require('path');   //引入子產品
const htmlWebpackPlugin = require('html-webpack-plugin');  //引入html-webpack-plugin插件

module.exports ={    //js資源的打包
 // mode:"development",    //webpack4.x需添加的内容，webpack3.x則需要注釋掉
  entry: {
    hello:path.join(__dirname,'./src/script/hello.js'),
    word:path.join(__dirname,'./src/script/word.js') //打包入口檔案路徑+檔案名
  },
  output: {   //打包完輸出的檔案
    path: path.join(__dirname,'./dist/js'),   //打包輸出檔案的路徑
    filename: "[name].boudle.js"    //打包輸出的檔案
    //有多個打包入口檔案時，則filename需要[name]或[hash]或[name]-[hash]占位
  },
  plugins:[   //插件，注意後面有“s”
    //初始化html插件
    new htmlWebpackPlugin()
  ]
}
           

3、輸入指令npm run webpack打包（也可以使用webpack）

（1）要使用npm run webpack 打包，需要在package.json檔案的scripts添加語句

"scripts": {
    "webpack": "webpack --config webpack.config.js --progress --display-modules --displas"
           

（2）打包成功

整個過程中出現過的報錯：

（1）未在webpack項目根目錄下添加webpack依賴，而是在總項目根目錄下添加的依賴

輸入npm run webpack報以下錯誤：

解決方案：在webpack項目根目錄下添加依賴

（2）自動化生成html檔案，當版本為webpack3.x的時候，不能在webpack.config.js增加“mode:‘development’ ”語句（對于隻是打封包件而不自動化生成html，在webpack3.x下似乎無影響），否則會報以下錯誤：

解決方法（1）：

解決方案（2）：仍使用webpack4.x，但版本不相容，并且之前添加webpack4.41.0依賴失敗，需要重新添加依賴并更新html-webpack-plugin

輸入指令：cnpm i --save-dev [email protected]

cnpm install --save-dev [email protected]

運作npm run webpack

總結：

（1）添加依賴時一定要指定版本

例子：

npm i --save-dev [email protected]（添加最新版）

cnpm install --save-dev [email protected]版本号

添加其他的插件依賴方法類似

（2）不能出現重複命名，即使不在同一個檔案夾

html-webpack-plugin插件的選件

1、可以将配置選項的哈希值傳遞給html-webpack-plugin，允許值如下：

參考文檔：https://github.com/jantimon/html-webpack-plugin#options

2、常用的配置選件

（1）

plugins: [  //插件
    //初始化html插件
    new htmlWebpackPlugin({
      template: "./src/example.html",  //指定模闆
      filename:'./webhtml/helloWord.html',  //編譯後出口的檔案名及路徑
      inject: 'body', //把腳本放在哪個腳本内，head或者body
      title: "Webpack App"  //頁面的title，模闆html可以通過引用這個變量來展示
    })
  ]
           

（2）要在模闆中引用title這個變量，需要在模闆html中title标簽中添加引用語句

（3）在平時項目中，并不希望html檔案與js檔案在同一級目錄下，修改webpack.config.js檔案中的output屬性值

output: {
    path: path.join(__dirname,'./dist'),  //打包出口檔案目錄
    filename: "boudle/[name].boudle.js"  //輸出的檔案名，輸出js可以在這裡指定。例如該例子就指定輸出的js目錄是./dist/boudle
  },
           

（3）在控制台輸入指令：npm run webpack

（4）項目上線輸出時引用js等的路徑不能是相對位址，應使用output裡面的publicPath 設定域名等絕對位址字首

const path = require('path');  //引入子產品
const htmlWebpackPlugin = require('html-webpack-plugin');   //引入插件

module.exports={
  mode: "development",  //mode的類型
  entry:{
    word: path.join(__dirname,'./src/script/word.js'),   //打包的入口檔案路徑+檔案名
    welcome: path.join(__dirname,'./src/script/welcome.js')
  },
  output: {
    path: path.join(__dirname,'./dist'),  //打包出口檔案路徑
    filename: "boudle/[name].boudle.js" , //輸出的檔案名
    publicPath: "http://www.zs.com" //項目上線輸出時引用js等的路徑不能是相對位址，應使用output裡面的publicPath設定域名等絕對位址字首
  },
  plugins: [  //插件
    //初始化html插件
    new htmlWebpackPlugin({
      template: "./src/example.html",  //模闆
      filename:'./webhtml/helloWord.html',  //編譯後的檔案名及路徑
      inject: 'body', //把腳本放在哪個腳本内，head或者body
      title: "Webpack App"  //頁面的title，模闆html可以通過引用這個變量來展示
    })
  ]
};

           

（5）壓縮html檔案。使用minify 進行壓縮

plugins: [  //插件
    //初始化html插件
    new htmlWebpackPlugin({
      template: "./src/example.html",  //模闆
      filename:'./webhtml/helloWord.html',  //編譯後的檔案名及路徑
      inject: 'body', //把腳本放在哪個腳本内，head或者body
      title: "Webpack App",  //頁面的title，模闆html可以通過引用這個變量來展示
      minify:{  //壓縮html
        collapseWhitespace:true, //删除空格
        removeComments:true, //去除注釋
      }
    })
  ]
           

效果：

其他參數可檢視文檔：https://github.com/kangax/html-minifier#options-quick-reference

（6）根據一個模闆檔案生成多個html頁面，并且每個頁面引用不同的js檔案

生成多個html檔案，需要初始化多個htmlWebpackPlugin插件

const path = require('path');  //引入子產品
const htmlWebpackPlugin = require('html-webpack-plugin');   //引入插件

module.exports={
  mode: "development",  //mode的類型
  entry:{
    //打包的入口檔案chunk，可以是一個string字元串，也可以是一個數組，還可以是一個json對象
    word: path.join(__dirname,'./src/script/word.js'),   //打包的入口檔案路徑+檔案名
    welcome: path.join(__dirname,'./src/script/welcome.js')
  },
  output: {
    path: path.join(__dirname,'./dist'),  //打包出口檔案路徑
    filename: "boudle/[name].boudle.js" , //輸出的檔案名
    publicPath: "http://www.zs.com" //項目上線輸出時引用js等的路徑不能是相對位址，應使用output裡面的publicPath設定域名等絕對位址字首
  },
  plugins: [  //插件
    //初始化html插件
    //生成多個html檔案，需要初始化多個htmlWebpackPlugin插件
    new htmlWebpackPlugin({   //hello.html
      template: "./src/example.html",  //模闆
      filename:'./webhtml/welcome.html',  //編譯後的檔案名及路徑
      inject: 'body', //把腳本放在哪個腳本内，head或者body
      title: "WebpackApp-Hello",  //頁面的title，模闆html可以通過引用這個變量來展示到新頁面
      minify:{  //壓縮html
        collapseWhitespace:true, //删除空格
        removeComments:true, //去除注釋
      },
      chunks: ["welcome"]  //引用entry的哪一個chunks（引用哪一個入口檔案）
    }),
    new htmlWebpackPlugin({   //word.html
      template: "./src/example.html",  //模闆
      filename:'./webhtml/word.html',  //編譯後的檔案名及路徑
      inject: 'body', //把腳本放在哪個腳本内，head或者body
      title: "WebpackApp-Word",  //頁面的title，模闆html可以通過引用這個變量來展示到新頁面
      minify:{  //壓縮html
        collapseWhitespace:true, //删除空格
        removeComments:true, //去除注釋
      },
      chunks: ['word'] //引用entry的哪一個chunks
    })
  ]
};
           

效果：

總結：

<% %>為js的模闆引擎的運作符

<%= %>則為js的模闆引擎取值符