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

資訊專欄INFORMATION COLUMN

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

quietin / 1609人閱讀

摘要：作者按因?yàn)榻坛趟緢D片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步系列教程十三自動(dòng)生成文件原文地址。編寫配置文件老規(guī)矩，是在這個(gè)選項(xiàng)中配置的。更多資料文檔文檔系列教程十三自動(dòng)生成文件原文地址

作者按：因?yàn)榻坛趟緢D片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十三)：自動(dòng)生成 HTML 文件》原文地址。更歡迎來(lái)我的小站看更多原創(chuàng)內(nèi)容：godbmw.com，進(jìn)行“姿勢(shì)”交流 ?(^?^*)
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. 為什么要自動(dòng)生成 HTML？

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

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

為了實(shí)現(xiàn)這個(gè)功能，需要借助HtmlWebpackPlugin根據(jù)指定的index.html模板生成對(duì)應(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ù)，并且運(yùn)行它，以方便我們?cè)诳刂婆_(tái)檢查打包結(jié)果：

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

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

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





  
  
  
  Document
4. 編寫Webpack配置文件

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

filename：打包后的 html 文件名稱

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

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

minify.collapseWhitespace：壓縮選項(xiàng)

除此之外，因?yàn)槲覀冊(cè)?b>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入口才會(huì)被打包
      minify: {
        // 壓縮選項(xiàng)
        collapseWhitespace: true
      }
    })
  ]
};
5. 結(jié)果和測(cè)試

運(yùn)行webpack進(jìn)行打包，下面是打包結(jié)果：

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

直接在 Chrome 打開index.html，并且打開控制臺(tái)：

圖片成功被插入到頁(yè)面，并且 js 的運(yùn)行也沒(méi)有錯(cuò)誤，成功。

6. 更多資料

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98455.html

相關(guān)文章

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

    摘要：作者按因?yàn)榻坛趟緢D片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步系列教程十三自動(dòng)生成文件原文地址。編寫配置文件老規(guī)矩，是在這個(gè)選項(xiàng)中配置的。更多資料文檔文檔系列教程十三自動(dòng)生成文件原文地址 作者按：因?yàn)榻坛趟緢D片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十三)：自動(dòng)生成 HTML 文件》原文地址。更歡迎來(lái)我的小站看更多原創(chuàng)內(nèi)容：godbmw.co...

    superw 評(píng)論0 收藏0

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

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

    LMou 評(píng)論0 收藏0

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

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

    hqman 評(píng)論0 收藏0

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

    摘要：作者按因?yàn)榻坛趟緢D片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步系列教程十四原文地址。需要注意的是應(yīng)該把放在配置項(xiàng)的最后一個(gè)，因?yàn)榕渲檬堑剐虻淖詈笈渲玫淖钕葓?zhí)行。以保證每次正式打包前，先清空原來(lái)遺留的打包文件。 作者按：因?yàn)榻坛趟緢D片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址...

    TalkingData 評(píng)論0 收藏0

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

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

    馬龍駒 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<