webpack4 系列教程(十三):自动生成HTML文件
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步《webpack4 系列教程(十三):自动生成 HTML 文件》原文地址。更欢迎来我的小站看更多原创内容:godbmw.com,进行“姿势”交流 ♪(∇*)
0. 课程介绍和资料
本节课的代码目录如下:
本节课用的 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?
看过这个系列教程的朋友,都知道在之前的例子中,每次执行webpack
打包生成js
文件后,都必须在index.html
中手动插入打包好的文件的路径。
但在真实生产环境中,一次运行webpack
后,完整的index.html
应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。
为了实现这个功能,需要借助HtmlWebpackPlugin
根据指定的index.html
模板生成对应的 html 文件,还需要配合html-loader
处理 html 文件中的<img>
标签和属性。
2. 编写入口文件
编写src/vendor/sum.js
文件,封装sum()
函数作为示例,被其他文件引用(模块化编程):
export function sum(a, b) {
return a + b;
}
编写入口文件src/app.js
,引入上面编写的sum()
函数,并且运行它,以方便我们在控制台检查打包结果:
import { sum } from "./vendor/sum";
console.log("1 + 2 =", sum(1, 2));
3. 编写 HTML 文件
根目录下的index.html
会被html-webpack-plugin
作为最终生成的 html 文件的模板。打包后,相关引用关系和文件路径都会按照正确的配置被添加进去。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<img src="./src/assets/imgs/xunlei.png">
</body>
</html>
4. 编写Webpack
配置文件
老规矩,HtmlWebpackPlugin
是在plugin
这个选项中配置的。常用参数含义如下:
- filename:打包后的 html 文件名称
- template:模板文件(例子源码中根目录下的 index.html)
- chunks:和
entry
配置中相匹配,支持多页面、多入口 - minify.collapseWhitespace:压缩选项
除此之外,因为我们在index.html
中引用了src/assets/imgs/
目录下的静态文件(图片类型)。需要用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. 结果和测试
运行webpack
进行打包,下面是打包结果:
可以在/dist/
中查看自动生成的index.html
文件,如下图所示,脚本和静态资源路径都被正确处理了:
直接在 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 文件》原文地址
webpack4 系列教程(十三):自动生成HTML文件的更多相关文章
- webpack4 系列教程(十一):字体文件处理
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十一):字体文件处理>原文地址.或者来我的小站看更多内容:godbmw.com 0. 课程介 ...
- webpack4 系列教程(十五):开发模式与webpack-dev-server
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...
- webpack4 系列教程(十四):Clean Plugin and Watch Mode
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
- webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
- linux下使用automake工具自动生成makefile文件
linux环境下,当项目工程很大的时候,编译的过程很复杂,所以需要使用make工具,自动进行编译安装,但是手写makefile文件比较复杂,所幸在GNU的计划中,设计出了一种叫做Autoconf/Au ...
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- webpack4 系列教程(九): CSS Tree Shaking
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> ...
- webpack4 系列教程(七): SCSS提取和懒加载
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载. 个人技术小站: https://god ...
随机推荐
- app锁定屏幕方向,某一个界面支持屏幕旋转~
AppDelegate.h 加 @property (nonatomic, assign) BOOL allowRotation; Appdelegate.m加 -(NSUInteger)applic ...
- bootstrap概述
前面的话 Bootstrap是简单.灵活的用于搭建WEB页面的HTML.CSS.Javascript的工具集.Bootstrap基于HTML5和CSS3,具有漂亮的设计.友好的学习曲线.卓越的兼容性, ...
- sqlserver使用存储过程跟踪SQL
为跟踪EF生成的SQL /1.添加存储过程/ USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_ ...
- Windows下编译安装 FFmpeg
在Linux/Mac下编译 ffmpeg是非常方便的.但要在 Windows下编译 ffmpeg还真要花点时间.以下就是在 Windowns下编译ffmpeg的步骤: 一.安装Cygwin 在wind ...
- Android JNI 学习(五):References Api
1. NewGlobalRef(创建全局引用) jobjectNewGlobalRef(JNIEnv *env, jobject obj); 创建 obj 参数所引用对象的新全局引用.obj 参数既可 ...
- Git使用详细教程(1):工作区、暂存区、本地仓库、远程仓库
之前的写过一篇如何在服务器上搭建Git服务Git服务器搭建,接下来的一段时间,我将详细的讲解Git的使用.看如下一张图片,本篇主要理解一些基本概念. 图中几个名词的意思如下: workspace: 工 ...
- Web前端-Vue.js必备框架(一)
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 《深入浅出nodejs》读书笔记(1)
概述 本来是想着学学node.js试试的,后来发现node.js才是真正的js啊,它里面用到了很多我们平时没用过的js特性,而且还非常优雅,比如它里面的异步编程思想,总之,<深入浅出node.j ...
- C#退出窗体的总结方法
一.关闭窗体 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit();Application.ExitThread(); System.En ...
- Oracle开窗函数笔记及应用场景
介绍Oracle的开窗函数之前先介绍一下分析函数,因为开窗函数也属于分析函数 分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返回多行,而聚合函数对于每个组只返回一行. 上面是 ...