国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack4 系列教程(十三)：自動生成HTML文件

superw / 2623人閱讀

摘要：作者按因為教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步系列教程十三自動生成文件原文地址。編寫配置文件老規(guī)矩，是在這個選項中配置的。更多資料文檔文檔系列教程十三自動生成文件原文地址

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十三)：自動生成 HTML 文件》原文地址。更歡迎來我的小站看更多原創(chuàng)內(nèi)容：godbmw.com，進行“姿勢”交流 ?(^?^*)
0. 課程介紹和資料

>>>本節(jié)課源碼

>>>所有課程源碼

本節(jié)課的代碼目錄如下：

本節(jié)課用的 plugin 和 loader 的配置文件package.json如下：

{
  "devDependencies": {
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.1"
  }
}
1. 為什么要自動生成 HTML？

看過這個系列教程的朋友，都知道在之前的例子中，每次執(zhí)行webpack打包生成js文件后，都必須在index.html中手動插入打包好的文件的路徑。

但在真實生產(chǎn)環(huán)境中，一次運行webpack后，完整的index.html應(yīng)該是被自動生成的。例如靜態(tài)資源、js 腳本都被自動插入了。

為了實現(xiàn)這個功能，需要借助HtmlWebpackPlugin根據(jù)指定的index.html模板生成對應(yīng)的 html 文件，還需要配合html-loader處理 html 文件中的標(biāo)簽和屬性。

2. 編寫入口文件

編寫src/vendor/sum.js文件，封裝sum()函數(shù)作為示例，被其他文件引用（模塊化編程）：

export function sum(a, b) {
  return a + b;
}

編寫入口文件src/app.js，引入上面編寫的sum()函數(shù)，并且運行它，以方便我們在控制臺檢查打包結(jié)果：

import { sum } from "./vendor/sum";

console.log("1 + 2 =", sum(1, 2));
3. 編寫 HTML 文件

根目錄下的index.html會被html-webpack-plugin作為最終生成的 html 文件的模板。打包后，相關(guān)引用關(guān)系和文件路徑都會按照正確的配置被添加進去。





  
  
  
  Document
4. 編寫Webpack配置文件

老規(guī)矩，HtmlWebpackPlugin是在plugin這個選項中配置的。常用參數(shù)含義如下：

filename：打包后的 html 文件名稱

template：模板文件（例子源碼中根目錄下的 index.html）

chunks：和entry配置中相匹配，支持多頁面、多入口

minify.collapseWhitespace：壓縮選項

除此之外，因為我們在index.html中引用了src/assets/imgs/目錄下的靜態(tài)文件（圖片類型）。需要用url-loader處理圖片，然后再用html-loader聲明。注意兩者的處理順序，url-loader先處理，然后才是html-loader處理。

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

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-[hash:5].bundle.js",
    chunkFilename: "[name]-[hash:5].chunk.js"
  },
  module: {
    rules: [
      {
        test: /.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              attrs: ["img:src"]
            }
          }
        ]
      },
      {
        test: /.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              limit: 10000, // size <= 20KB
              publicPath: "static/",
              outputPath: "static/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["app"], // entry中的app入口才會被打包
      minify: {
        // 壓縮選項
        collapseWhitespace: true
      }
    })
  ]
};
5. 結(jié)果和測試

運行webpack進行打包，下面是打包結(jié)果：

可以在/dist/中查看自動生成的index.html文件，如下圖所示，腳本和靜態(tài)資源路徑都被正確處理了：

直接在 Chrome 打開index.html，并且打開控制臺：

圖片成功被插入到頁面，并且 js 的運行也沒有錯誤，成功。

6. 更多資料

html-loader文檔: https://www.webpackjs.com/loaders/html-loader/

html-webpack-plugin文檔: https://www.webpackjs.com/plugins/html-webpack-plugin/

《webpack4 系列教程(十三)：自動生成 HTML 文件》原文地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53097.html

相關(guān)文章

  • webpack4 系列教程(十三)：自動生成HTML文件

    摘要：作者按因為教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步系列教程十三自動生成文件原文地址。編寫配置文件老規(guī)矩，是在這個選項中配置的。更多資料文檔文檔系列教程十三自動生成文件原文地址 作者按：因為教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十三)：自動生成 HTML 文件》原文地址。更歡迎來我的小站看更多原創(chuàng)內(nèi)容：godbmw.co...

    quietin 評論0 收藏0

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個人技術(shù)博客。所以我花費了個多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計模式）、面試刷題（偏前...

    LMou 評論0 收藏0

  • webpack4系列教程（十）：總結(jié)

    摘要：傳送門系列教程一初識系列教程二創(chuàng)建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開發(fā)日益復(fù)雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無疑是前端開發(fā)者的福音，我的博文只...

    hqman 評論0 收藏0

  • webpack4 系列教程(十四)：Clean Plugin and Watch Mode

    摘要：作者按因為教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步系列教程十四原文地址。需要注意的是應(yīng)該把放在配置項的最后一個，因為配置是倒序的最后配置的最先執(zhí)行。以保證每次正式打包前，先清空原來遺留的打包文件。 作者按：因為教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址...

    TalkingData 評論0 收藏0

  • webpack4 系列教程(六): 處理SCSS

    摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內(nèi)容本節(jié)課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步原文地址系列教程六處理。根據(jù)規(guī)則放在最后的首先被執(zhí)行。 這節(jié)課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內(nèi)容 >>> >>> 本節(jié)課源碼 >>> 所有課程源碼 教程所示圖片使用的是...

    馬龍駒 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<