從零開始的webpack生活-0x003：html模板生成

ZHAO_ 發布于2019-08-21 17:27 / 2666人閱讀

摘要：生成多頁面修改配置自動插入標題第二個頁面打包并查看文件夾結構這是一個模板文件這是一個模板文件此時的配置自動插入標題第二個頁面其他配置看這里資源源代碼

0x001 概述

上一章之后已經可以自動刷新瀏覽器了，大大方便了我們的開發，這章開始講插件，第一個插件將會解決上一章節的一個問題，那就是index.html需要手動插入打包好的js，同時不會將index.html一起放到dist文件夾下的問題。

0x002 初始化項目

創建項目文件夾0x003-html-webpack-plugin，我們將在這個文件夾底下開始這一章節的所有編碼

復制上一章的文件及其目錄，除了dist和index.html

+ webpack-study
  + 0x001-begin
  + 0x002-dev-server
  + 0x003-html-webpack-plugin
    + src
      - index.js
    - package.json
    - webpack.config.js

0x003 簡單配置html-webpack-plugin并使用

安裝

# 終端輸入
$ cnpm install --save-dev html-webpack-plugin
# 輸出
? Installed 3 packages
...
? All packages installed (473 packages installed from npm registry, used 7s, speed 1.08MB/s, json 434(768.7kB), tarball 7.09MB)

配置

初始化插件

var HtmlWebpackPlugin = require("html-webpack-plugin");

添加插件

plugins  : [
    new HtmlWebpackPlugin()
]

最終配置文件

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

module.exports = {
    entry    : "./src/index.js",
    output   : {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    devServer: {
        contentBase: path.resolve(__dirname, ""),
        port       : 9000,
        compress   : true,
        open       : true,
        host       : "0.0.0.0",
        index      : "index.html"
    },
    plugins  : [
        new HtmlWebpackPlugin()
    ]
}

打包

$ npm run build
Hash: 1d3993547a22839c5053
Version: webpack 3.8.1
Time: 413ms
     Asset       Size  Chunks             Chunk Names
  index.js  510 bytes       0  [emitted]  main
index.html  181 bytes          [emitted]  
   [0] ./src/index.js 32 bytes {0} [built]
Child html-webpack-plugin for "index.html":
     1 asset
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
       [2] (webpack)/buildin/module.js 495 bytes {0} [built]
        + 2 hidden modules

此時查看dist，會發現生成了兩個文件

index.js：webpack打包生成的js文件

index.html：htmlWebpackPlugin自動生成
觀察index.html可以發現，htmlWebpackPlugin不只是生成了一個html文件，還添加了對我們打包生成的index.js的引用。



  
    
    Webpack App

0x004 插件配置

自定義title

添加配置

// package.json
new HtmlWebpackPlugin({
            title: "自動插入標題"
        })

打包




  
    
    自動插入標題

自定義文件名

添加配置

    new HtmlWebpackPlugin({
        title   : "自動插入標題",
        filename: "admin.html",
        }）

打包查看文件

+ dist
  - admin.html
  - index.js

根據模板生成

添加模板文件./index.html

這是一個模板文件

添加配置

 new HtmlWebpackPlugin({
            title   : "自動插入標題",
            filename: "admin.html",
            template      : path.resolve(__dirname, "index.html")
        })

打包

這是一個模板文件

自定義js文件注入位置

添加配置

    new HtmlWebpackPlugin({
                title   : "自動插入標題",
                filename: "admin.html",
                template      : path.resolve(__dirname, "index.html"),
                inject        : "head" 
            })

打包

這是一個模板文件

可配置的值：

true：注入

false：不注入

"head"：注入頭部

"body"：注入body底部

壓縮html

添加配置

        new HtmlWebpackPlugin({
    title         : "自動插入標題",
    filename      : "admin.html",
    template      : path.resolve(__dirname, "index.html"),
    inject        : "head",
    minify:{
        collapseWhitespace:true,
    }
}),

打包

這是一個模板文件

可選配置
這里的值是一個對象，具體可以配置哪些可以看html-minifier的配置說明

多入口的情況下自定義插入的chunk

添加入口文件index2.js、index3.js

// ./src/index2.js
document.write("hello index2")
// ./src/index3.js
document.write("hello index3")

修改entry、output、plugin

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

module.exports = {
    entry    : {
        index1: "./src/index.js",
        index2: "./src/index2.js",
        index3: "./src/index3.js",
    },
    output   : {
        path    : path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].js"
    },
    devServer: {
        contentBase: path.resolve(__dirname, ""),
        port       : 9000,
        compress   : true,
        open       : true,
        host       : "0.0.0.0",
        index      : "index.html"
    },
    plugins  : [
        new HtmlWebpackPlugin({
            title   : "自動插入標題",
            filename: "admin.html",
            template: path.resolve(__dirname, "index.html"),
            inject  : "head",
            chunks  : ["index", "index3"]
        })
    ]
}

打包

這是一個模板文件

注意：注入的順序和chunks的順序相反

自定義注入chunk的順序

修改配置

    new HtmlWebpackPlugin({
        title         : "自動插入標題",
        filename      : "admin.html",
        template      : path.resolve(__dirname, "index.html"),
        inject        : "head",
        chunks        : ["index1", "index3"],
        chunksSortMode: function (chunk1, chunk2) {
            return -1;
        }
    })

打包

這是一個模板文件

可選值

none：不排序

"auto"：根據thunk的id排序

"dependency"：根據依賴排序

"manual"：找不到文檔啊，不知道說的是啥

function：提供一個函數計算排序方式，會自動調用這個函數來計算排序，可以根據chunk1.names[0]和chunk2.names[0]對比計算出來，如果返回大于1的數，則chunk1在前，chunk2在后，反之亦然。調試的時候可以直接在函數中console.log(chunk1, chunk2)來調試。

生成多頁面

修改配置

 plugins  : [
    new HtmlWebpackPlugin({
        title         : "自動插入標題",
        filename      : "admin.html",
        template      : path.resolve(__dirname, "index.html"),
        inject        : "head",
        chunks        : ["index1", "index3"],
        chunksSortMode: function (chunk1, chunk2) {
            return 1;
        }
    }),
    new HtmlWebpackPlugin({
        title         : "第二個頁面",
        filename      : "index.html",
        template      : path.resolve(__dirname, "index.html"),
        inject        : "head",
        chunks        : ["index1", "index2"],
        chunksSortMode: function (chunk1, chunk2) {
            return 1;
        }
    })

]

打包并查看dist

# dist 文件夾結構 + dist - index.html - admin.html - ...

這是一個模板文件

此時的配置

// webpack.config.js
var path              = require("path")
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry    : {
        index1: "./src/index.js",
        index2: "./src/index2.js",
        index3: "./src/index3.js",
    },
    output   : {
        path    : path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].js"
    },
    devServer: {
        contentBase: path.resolve(__dirname, ""),
        port       : 9000,
        compress   : true,
        open       : true,
        host       : "0.0.0.0",
        index      : "index.html"
    },
    plugins  : [
        new HtmlWebpackPlugin({
            title         : "自動插入標題",
            filename      : "admin.html",
            template      : path.resolve(__dirname, "index.html"),
            inject        : "head",
            minify:{
                collapseWhitespace:true,
            },
            chunks        : ["index1", "index3"],
            chunksSortMode: function (chunk1, chunk2) {
                return 1;
            }
        }),
        new HtmlWebpackPlugin({
            title         : "第二個頁面",
            filename      : "index.html",
            template      : path.resolve(__dirname, "index.html"),
            inject        : "head",
            minify:{
                collapseWhitespace:true,
            },
            chunks        : ["index1", "index2"],
            chunksSortMode: function (chunk1, chunk2) {
                return 1;
            },
        })

    ]
}

其他配置看這里

0x005 資源

源代碼

GPU云服務器云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89533.html

從零開始的webpack生活-0x010：TemplatingLoader裝載模板

摘要：概述上一章講的時候關于文件相關的，這一章講的是模板相關的。環境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結果可以看到，被打包成了字符串，并封裝成模塊導出。更多資源，請查閱的倉庫和官網資源源代碼 0x001 概述上一章講的時候關于文件相關的loder，這一章講的是模板相關的loder。 0x002 環境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x011：StylingLoader裝載樣式

0x001 概述上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x004：js壓縮混淆

摘要：概述上一章講了關于生成模板的，并且最后將壓縮，這一章講的是壓縮混淆配置環境初始化項目新建修改配置安裝依賴修改初始化添加插件最終配置文件打包配置匹配上的文件才壓縮添加修改打包未被壓縮壓縮了取值正則匹配或者正則匹配數組需要壓 0x001 概述上一章講了關于生成模板html的，并且最后將html壓縮，這一章講的是js壓縮混淆 0x002 配置環境初始化項目 $ npm init -y...

Riddler 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x002：devServer自動刷新

摘要：概述上一章已經實現了最簡單的配置文件使用和監聽功能，這一章要開始實現自動刷新。只能在終端中使用的在章節中指令后標有可以使用的功能，快速調用終端最終項目文件夾結構資源源代碼 0x001 概述上一章已經實現了最簡單的webpack配置文件使用和webpack監聽功能，這一章要開始實現自動刷新。 0x002 瀏覽器自動刷新創建新的項目框架 - webpack_study + ...

AlanKeene 2019-08-21 17:27 評論0 收藏0