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

時間  2019-11-16
標籤 開始 webpack 生活 0x003 html 模板 生成 欄目 悠閒生活 简体版
原文   原文鏈接

0x001 概述

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

0x002 初始化項目

  1. 建立項目文件夾0x003-html-webpack-plugin，咱們將在這個文件夾底下開始這一章節的全部編碼

  2. 複製上一章的文件及其目錄，除了dist和index.htmlhtml

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

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

  1. 安裝java

    # 終端輸入
$ 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)
  2. 配置

  • 初始化插件webpack

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

  • 添加插件git

    plugins  : [
    new HtmlWebpackPlugin()
]

  • 最終配置文件github

    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()
    ]
}

  1. 打包web

    $ 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，會發現生成了兩個文件npm

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

  • index.html：htmlWebpackPlugin自動生成
    觀察index.html能夠發現，htmlWebpackPlugin不僅是生成了一個html文件，還添加了對咱們打包生成的index.js的引用。json

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="index.js"></script></body>
</html>

0x004 插件配置

  1. 自定義titlesegmentfault

    • 添加配置

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

    • 打包

      <!-- dist/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>自動插入標題</title>
  </head>
  <body>
  <script type="text/javascript" src="index.js"></script></body>
</html>

  2. 自定義文件名

    • 添加配置

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

    • 打包查看文件

      + dist
  - admin.html
  - index.js

  3. 根據模板生成

    • 添加模板文件./index.html

      <!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>這是一個模板文件</p>
</body>
</html>

    • 添加配置

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

    • 打包

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <p>這是一個模板文件</p>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

  4. 自定義js文件注入位置

    • 添加配置

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

    • 打包

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<p>這是一個模板文件</p>
</body>
</html>

    • 可配置的值：

      • true：注入
      • false：不注入
      • 'head'：注入頭部
      • 'body'：注入body底部

  5. 壓縮html

    • 添加配置

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

    • 打包

      <!-- ./dist/admin.html -->
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script><script type="text/javascript" src="index3.112a255042f8daa92065.js"></script></head><body><p>這是一個模板文件</p></body></html>
    • 可選配置
      這裏的值是一個對象，具體能夠配置哪些能夠看html-minifier的配置說明

  6. 多入口的狀況下自定義插入的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']
        })
    ]
}
      • 打包
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script>
    <script type="text/javascript" src="index3.112a255042f8daa92065.js"></script>
</head>
<body>
<p>這是一個模板文件</p>
</body>
</html>

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

  7. 自定義注入chunk的順序

    • 修改配置

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

    • 打包

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="index3.112a255042f8daa92065.js"></script>
    <script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script>
</head>
<body>
<p>這是一個模板文件</p>
</body>
</html>

    • 可選值

      • none：不排序
      • 'auto'：根據thunk的id排序
      • 'dependency'：根據依賴排序
      • 'manual'：找不到文檔啊，不知道說的是啥
      • function：提供一個函數計算排序方式，會自動調用這個函數來計算排序，能夠根據chunk1.names[0]和chunk2.names[0]對比計算出來，若是返回大於1的數，則chunk1在前，chunk2在後，反之亦然。調試的時候能夠直接在函數中console.log(chunk1, chunk2)來調試。

  8. 生成多頁面

    • 修改配置

      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
  - ...
  
<!-- ./dist/admin.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script>
    <script type="text/javascript" src="index3.112a255042f8daa92065.js"></script>
</head>
<body>
<p>這是一個模板文件</p>
</body>
</html>

<!-- ./dist/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  <script type="text/javascript" src="index1.87e0a7e4f4842924a964.js"></script><script type="text/javascript" src="index2.72cf280e7df62106422b.js"></script></head>
  <body>
  <p>這是一個模板文件</p>
  </body>
</html>

  9. 此時的配置

    // 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;
            },
        })

    ]
}
  10. 其餘配置看這裏

0x005 資源

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程