从零开始的webpack生活-0x003：html模板生成

ZHAO_ 发布于2019-08-21 17:27 / 2542人阅读

摘要：生成多页面修改配置自动插入标题第二个页面打包并查看文件夹结构这是一个模板文件这是一个模板文件此时的配置自动插入标题第二个页面其他配置看这里资源源代码

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 资源

源代码

专线服务 idc机房托管从零开始的邮件服务器从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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