demo07 自動生成 Html 文件

時間 2019-12-05

標籤 demo07 demo 自動生成 html 文件欄目 HTML 简体版

原文原文鏈接

1.爲何要自動生成html?

在以前的 demo 中，執行完 webpack 後要手動把生成的同步模塊的 js 包 (或css包) 引入到html中，這樣實際上是比較繁瑣的。javascript

尤爲是在真正的項目開發中，爲了對靜態資源或第三方包作長緩存，咱們會配置 webpack ，讓其生成的每一個包的文件名都自動帶上該包對應的 chunkhash 值。若是文件內容有改變的話，那麼該文件對應的包的 chunkhash 也會改變，這樣就致使對應的 html 引用的 url 地址也須要進行相應的修改。css

所以，咱們須要經過 webpack 插件來自動生成 html 以及自動引用相應的 js 包。html

html-webpack-plugin 插件就能幫你作到。java

2.html-webpack-plugin

html-webpack-plugin 能夠根據你配置的 html 模板，自動生成一個 html 文件，而且引用相關的資源文件。webpack

new HtmlWebpackPlugin({
      title: '設置html的title',// 當設置了template選項後，title選項將失效
      filename: "index.html",
      template: "./index.html",
      minify: {
        // 壓縮選項
        collapseWhitespace: true
      }
    }),
複製代碼

title 設置生成的 html 文件的標題(當設置了template選項後，title選項將失效)git
filename 生成 html 的文件名github
template 指定一個模板文件來生成 html ，可選的模板有 html,jade , ejs 等等，使用自定義模板時，須要安裝相對應的 loader 。web
inject 配置 <script> (即js包) 標籤在 html 中的注入選項：true(默認) | body | head | falsenpm
- true <script> 標籤放在 <body> 底部
- body 效果與 true 相同
- head <script> 標籤放在 html 的 <head> 標籤內
- false 不引用 webpack 生成的 js 文件
favicon 設置 html 文件的 favicon緩存
minify (默認false) 對 html 文件進行壓縮
hash 在引用 js 或 css 文件的 url 中添加一個惟一的 hash 值，用於避免緩存命中
chunks 默認狀況下，html 會引用 webpack 生成的全部同步模塊的js文件（即便是多入口），經過此選型能夠指定只引入哪些特定入口的文件
excludeChunks 與 chunks 選項相反

官方文檔：github.com/jantimon/ht…

3.安裝相關依賴

(注意：html-webpack-plugin 依賴於 webpack，所以須要在項目下安裝 webpack)

npm install -D html-webpack-plugin
npm install -D webpack
npm install -D css-loader // 把 css 轉化爲 js 模塊
npm install -D style-loader // 將 css 以 style 節點插入 html 中
複製代碼

4.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo07
    --src
      -app.js
      -app2.js
      -style.css
    --index.html
    --webpack.config.js
複製代碼

src/app.js

// const css = import('./style.css');
window.addEventListener("click", function () {
  const css = import('./style.css');
  console.log(css);
});
複製代碼

src/style.js

body{
  background-color: red;
}
複製代碼

5.編寫webpack配置文件

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/app.js"
    // app2: "./src/app2.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css處理爲style標籤
        use: [
          "style-loader",
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '設置html的title',// 當設置了template選項後，title選項將失效
      filename: "index.html",
      template: "./index.html",
      // chunks: ["app"], // entry中的app入口才會被打包
      minify: {
        // 壓縮選項
        collapseWhitespace: true
      }
    }),
  ]
};
複製代碼

6.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

7.驗證打包結果

在 dist 文件夾中包含 index.html , 並自動引用相應的 js 包。輸出結果：

1.bundle.js
app.bundle.js
index.html
複製代碼

8.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…

相關標籤/搜索

每日一句

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