整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

webpack最常用的插件：HtmlWebpackPlugin

天介绍 webpack 的一个最常用的插件：HTML Webpack Plugin。

说它是使用 webpack 开发前端项目必不可少的插件也不为过，因为它可以自动帮我们将 webpack 打包生成的文件（比如 js 文件、css 文件）嵌入到 html 文件中。

这在生成的文件带有哈希串时尤为有用。

在 webpack 配置文件引入 HtmlWebpackPlugin 插件，然后在 plugins 数组中通过 new HtmlWebpackPlugin() 加入 HtmlWebpackPlugin 实例对象即可。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.[contenthash:8].js',
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin()
  ],
}

我们执行 npx webpack 命令后，webpack 额外给我们生成了一个 dist/index.html 文件。该 html 文件格式化后得到的内容为：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script defer="defer" src="app.c8b961ec13a790ae7d15.js"></script>
</head>
<body></body>
</html>

可以看到将打包好的 app.js 文件被自动嵌入到 head 元素下最后一个子元素位置。

这里打包文件名尾部被添加了内容哈希串，这意味着每次项目的内容发生变化，哈希串的值都不同。

试想下，如果你自己管理 html 文件，每次都要改这个 js 文件名，是要多累，还好有 HtmlWebpackPlugin 帮忙。

当然前面这种只是 HtmlWebpackPlugin 插件的默认用法，我们可以做更具体的定制化。

一些常用的属性

我们需要传入一个配置对象来进行模板渲染定制化。

HtmlWebpackPlugin 的配置非常丰富，不过常用的就几个。

plugins: [
  new HtmlWebpackPlugin({
    title: '前端西瓜哥的博客',
    favicon: 'static/favicon.ico',
  }),
],
  • titile：设置网页标题；
  • filename：生成 html 文件名，默认值为 index/html；
  • template：使用自己的模板，这里填这个模板的路径，使用了之后一些配置项就无效了，比如 title；
  • favicon：指定网站图标路径，除了会在 html 上填充 favicon 相关内容，还会将该文件拷贝到打包文件夹下，非常好用；
  • minify：是否压缩 html 文件。不设置时，如果 webpack 的 mode 为 production，就会压缩 html，移除多余的空格和注释之类的。

使用自定义 html 模板

在实际开发中，通常是创建一个 index.html 提供给 HtmlWebpackPlugin 插件作为模板。

这样的话，title 等配置和一些更细碎的内容就可以直接写到 html 上。相比配置，直接在 html 上编辑要更直观些。

我们在根目录创建一个 index.html 作为模板：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端西瓜哥</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body></body>
</html>

这样就可以直接在 html 模板上添加 title，以及一些 cdn 形式的第三方库。

webpack.config.js 配置改为：

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.html'
  }),
],

生成的 html 为：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端西瓜哥</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script defer src="app.d02c9155f73c92f51bf5.js"></script>
</head>
<body></body>
</html>

第三方库建议使用自己本地项目的，会更稳定和安全些，比如上面就建议改为 <script src="static/jquery-3.6.0.min.js"></script>。

这里会用到一个 copy-webpack-plugin 插件将一些文件或文件夹拷贝到打包目录下。关于这个插件我会另外专门写一篇文章讲解，这里不展开。

自定义 html 注入变量

webpack 支持通过使用 lodash.template() 的方式注入变量。

我们将模板 html 改为下面这样：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <%= htmlWebpackPlugin.options.saySomething %>
</body>
</html>

配置改为：

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.html',
    title: '前端西瓜哥的博客',
    // 下面这个是自定义属性
    saySomething: 'Stay hungry, stay foolish'
  }),
],

将传入给 HtmlWebpackPlugin 的配置属性会成为 htmlWebpackPlugin.options 对象下的属性，嵌入到模板 html 下。

所以这里的生成结果是：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端西瓜哥的博客</title>
<script defer src="app.d02c9155f73c92f51bf5.js"></script></head>
<body>
  Stay hungry, stay foolish
</body>
</html>

因为使用了 lodash.template 模板渲染丰富，除了可以嵌入变量的值，还支持判断条件、循环等特性，基本上可以满足我们的绝大多数场景。

结尾

HTML Webpack Plugin 是被广泛使用的 webpack 插件，用来将我们打包出来的文件自动嵌入到一个模板 HTML 中。

实际开发中，通常我们会使用自己编写的 html 模板。

我是前端西瓜哥，热衷于分享前端知识，欢迎关注我。

TOC

1.认识webpack

  • webpack是一个现代的JavaScript应用的静态模块打包工具
  • 1.模块化
  • 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
  • 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
  • 而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做


  • 2.打包
  • 将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
  • 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。


  • 3.和grunt/gulp的对比
  • 如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。
  • 只需要进行简单的合并、压缩，就使用grunt/gulp即可。
  • 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack

在这里插入图片描述



2.webpack的安装

  • 安装node.js（https://nodejs.org/zh-cn/）
  • 查看node版本 node -v
  • 全局安装webpack npm install webpack@3.6.0 -g，指定了版本为3.6.0
  • 局部安装webpack cd 对应目录；npm install webpack@3.6.0 --save-dev
  • 其中--save-dev是开发时依赖，项目打包后不需要继续使用
  • 为什么全局安装后，还需要局部安装呢？
  • 在终端直接执行webpack命令，使用的全局安装的webpack
  • 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack


3.webpack的起步

  • 创建目录结构

在这里插入图片描述


  • 文件和文件夹解析：
  • dist文件夹：用于存放之后打包的文件
  • src文件夹：用于存放我们写的源文件
  • main.js：项目的入口文件。
  • mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。
  • info.js：定义了一些变量信息


  • index.html：浏览器打开展示的首页html
  • package.json：通过npm init生成的，npm包管理的文件


  • mathUtils.js function add(num1,num2){ return num1 + num2; } function mul(num1,num2){ return num1*num2; } module.exports = { add, mul }
  • info.js javascript<br />export const name = 'why';<br />export const height = 180;<br />
  • main.js const {add,mul} = require('./mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); import {name,height} from './info.js'; console.log(name); console.log(height); 注：可以看到main.js引入了其它js文件
  • webpack打包 webpack ./src/main.js ./dist/bundle.js
  • 打包后会在dist文件下，生成一个bundle.js文件
  • bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可
  • index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="dist/bundle.js"></script> </body> </html>

4.webpack的配置

  • 目标：简化上面的打包命令
  • 1.创建webpack.config.js文件 const path = require('path') module.exports = { entry : "./src/main.js", output: { path: path.resolve(__dirname,'dist'), //动态获取绝对路径,__dirname是node中全局变量 filename : "bundle.js" }, }
  • 2.npm init，生成package.json文件，这里面是针对当前项目的主要描述文件（里面会生成所有安装的依赖）

在这里插入图片描述


  • 3.局部安装webpack----cd 当前目录；npm install webpack@3.6.0 --save-dev，生成node模块

在这里插入图片描述


  • 4.配置package.json文件，简化命令

在这里插入图片描述


  • 5.命令npm run build

5.loader的使用

  • 在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等
  • 对于webpack本身的能力来说，对于这些转化是不支持的。需要webpack扩展对应的loader
  • loader使用过程：
  • 步骤一：通过npm安装需要使用的loader
  • 步骤二：在webpack.config.js中的modules关键字下进行配置


5.1 css的loader使用

  • 1.创建css文件

在这里插入图片描述

css<br />body {<br /> background-color:red; <br />}<br />

  • 2.main.js引用 //1.使用commonjs的模块化规范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模块化规范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依赖css文件 require("./css/normal.css")
  • 3.run build打包（报错）

在这里插入图片描述


  • 4.https://v4.webpack.docschina.org/loaders/，配置cssloader文档
  • 5.npm install --save-dev css-loader@2.0.2
  • 6.npm install style-loader@0.23.1 --save-dev
  • 7.配置webpack.json.js文件

在这里插入图片描述


  • 8.index.html的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 你好 <h2> 你好 </h2> <script src="dist/bundle.js"></script> </body> </html>

5.2 less的loader使用(同理)

  • 1.创建less文件

在这里插入图片描述

@fontSize: 50px; @fontColor: orange; body{ font-size: @fontSize; color: @fontColor; }

  • 2.引入less文件（main.js） //1.使用commonjs的模块化规范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模块化规范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依赖css文件 require("./css/normal.css") //4.依赖less文件 require("./css/special.less")
  • 3.npm install less-loader@4.1.0 --save-dev 和npm install less@3.9.0 --save-dev
  • 4.配置webpack.json.js文件

在这里插入图片描述


  • 5.打包 run build

5.3 图片文件处理

  • 1.创建img文件

在这里插入图片描述


  • 2.修改css文件 body { /* background-color:red; */ background-image: url("../img/timg.jpg"); }
  • 3.直接打包会出错，需要安装url-loader包 npm install url-loader@1.1.2 --save-dev
  • 4.修改webpack.json.js文件

在这里插入图片描述


  • 5.这时候打包会成功，但是换了一张大的图片就会报错

在这里插入图片描述


  • 6、安装file-loader处理大文件npm install file-loader@3.0.1 --save-dev
  • 7、再次打包即可成功

在这里插入图片描述

注：可以发现，对于大的图片打包成功会输出到dist文件夹下，此时引用的话会找不到，需要配置下路径

  • 8.修改webpack.config.js

在这里插入图片描述


  • 9.另外对于生成的图片名字太长，我们可以配置下生成规则--webpack.config.js,表示生成名字+8位哈希值+扩展名

在这里插入图片描述


5.4 babel的使用（es6转es5）

  • 1.npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  • 2.配置webpack.json.js文件

在这里插入图片描述


  • run build

6.webpack中配置Vue

6.1 引入vue.js

  • 1 . npm install vue@2.5.21 --save 因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖
  • 2 . main.js引入 //1.使用commonjs的模块化规范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模块化规范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依赖css文件 require("./css/normal.css") //4.依赖less文件 require("./css/special.less") //5.使用Vue进行开发 import Vue from "vue" new Vue({ el:'#app', data:{ name : 'codewhy' } })
  • 3.run build（报错）---这个错误说的是我们使用的是runtime-only版本的Vue，

在这里插入图片描述


  • 4.修改webpack.config.js配置，即可成功

在这里插入图片描述


  • 5.index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body > <div id="app"> 你好 </div> <h2> 你好 </h2> <script src="dist/bundle.js"></script> </body> </html>

6.2 el和template的区别

  • 正常运行之后，我们来考虑另外一个问题：
  • 如果我们希望将data中的数据显示在界面中，就必须是修改index.html
  • 如果我们后面自定义了组件，也必须修改index.html来使用组件
  • 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？


  • 定义template属性：
  • 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
  • 这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素
  • 但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？
  • 我们可以再定义一个template属性，代码如下：

在这里插入图片描述



  • 那么，el和template模板的关系是什么呢？
  • 在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
  • 而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。


  • 这样做有什么好处呢？
  • 这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可


6.3 分离template模板

  • 书写template模块非常麻烦怎么办呢？
  • 没有关系，稍后我们会将template模板中的内容进行抽离。
  • 会分成三部分书写：template、script、style，结构变得非常清晰。

在这里插入图片描述



  • 1 .App.vue文件 <template> <div> <h2 class="title">{{message}}</h2> <button @click="btnClick">按钮</button> <h2>{{name}}</h2> <Cpn/> </div> </template> <script> import Cpn from "./Cpn.vue" export default { name:"App", components: { Cpn }, data(){ return { name : 'codewhy', message:"123" } }, methods:{ btnClick(){ } } } </script> <style scoped> .title{ color:green; } </style>
  • 2 .子组件Cpn.vue文件 <template> <div> <h2 class="title">我是cpn组件的标题</h2> <p>我是cpn组件的内容</p> <h2>{{name}}</h2> </div> </template> <script> export default { name:"Cpn", data(){ return { name : 'Cpn的组件的name', } }, methods:{ btnClick(){ } } } </script> <style scoped> .title{ color:green; } </style>
  • 3 .main.js引入App.vue //1.使用commonjs的模块化规范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模块化规范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依赖css文件 require("./css/normal.css") //4.依赖less文件 require("./css/special.less") //5.使用Vue进行开发 import Vue from "vue" // import App from "./vue/app" import App from './vue/App.vue' const app = new Vue({ el:'#app', // 如果同时有el和template，会直接用template 替换掉el内容 template: <App/> , components:{ App } })
  • 4 .index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body > <div id="app"> 你好 </div> <h2> 你好 </h2> <script src="dist/bundle.js"></script> </body> </html>

7.认识plugin

7.1 添加版权声明

  • 在webpack.config.js配置如下

在这里插入图片描述


  • 重新打包

在这里插入图片描述


7.2 HtmlWebpackPlugin

  • 目的：将index.html打包到dist中
  • 1.安装插件npm install html-webpack-plugin@3.2.0 --sava-dev
  • 2.在webpack.config.js导入

在这里插入图片描述


  • 3.因为index.html的js 打包后会自动引入，所以注释了dist 以及下面的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body > <div id="app"> 你好 </div> <!-- <script src="dist/bundle.js"></script> --> </body> </html>
  • 4.最后生成的如下

在这里插入图片描述


7.3 压缩js的插件

  • 1.npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
  • 2.配置webpack.config.js

在这里插入图片描述


  • 3.npm run build
  • 对js丑化

在这里插入图片描述



8.plugin的使用搭建本地服务器

  • webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
  • 不过它是一个单独的模块，在webpack中使用之前需要先安装它
  • npm install --save-dev webpack-dev-server@2.9.1


  • 修改webpack.config.js
  • devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
  • contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
  • port：端口号
  • inline：页面实时刷新
  • historyApiFallback：在SPA页面中，依赖HTML5的history模式

在这里插入图片描述


  • 修改package.json文件

在这里插入图片描述


  • 开始热部署npm run dev

在这里插入图片描述

这样就会实现，当文件改变的时候，页面会自动修改，因为此时这些修改保存到了内存中，类似于java的热部署

  • 补充1：（自动打开链接）

在这里插入图片描述


  • 补充2：js压缩在开发中，不应该使用

在这里插入图片描述


9.webpack的配置分离

  • 目的：开发时，使用一个配置文件；发布时使用另一个配置文件
  • npm install webpack-merge@4.1.5 --save-dev 安装merge包，用于合并下面的配置文件
  • 所以将webpack.config.js抽离成3个文件
  • 1 . base.config.js const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const uglifyjsWebpackPlugin = require('uglifyjs-Webpack-plugin') module.exports = { entry : "./src/main.js", output: { path: path.resolve(__dirname,'../dist'), //动态获取绝对路径,__dirname是node中全局变量 filename : "bundle.js", //publicPath: 'dist/' }, plugins:[ new webpack.BannerPlugin('最终版权swz所有！'), new HtmlWebpackPlugin({ template:'index.html' }), //new uglifyjsWebpackPlugin() ], module: { rules: [ { test: /\.css/,//style¨E45Eloader将模块的导出作为样式添加到DOM中//css¨E45Eloader解析CSS文件后，使用import加载，并且返回CSS代码//使用多个loader时，是从右向左use:¨E91E′style¨E45Eloader′,′css¨E45Eloader′¨E93E¨E125E,¨E123Etest:/¨E92E.less/, // style-loader 将模块的导出作为样式添加到 DOM 中 // css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码 //使用多个loader时，是从右向左 use: ['style-loader','css-loader'] }, { test: /\.less/,//style¨E45Eloader将模块的导出作为样式添加到DOM中//css¨E45Eloader解析CSS文件后，使用import加载，并且返回CSS代码//使用多个loader时，是从右向左use:¨E91E′style¨E45Eloader′,′css¨E45Eloader′¨E93E¨E125E,¨E123Etest:/¨E92E.less/, use: [{ loader: 'style-loader' // creates style nodes from JS strings }, { loader: 'css-loader' // translates CSS into CommonJS }, { loader: 'less-loader' // compiles Less to CSS }] }, { test: /\.(png|jpg|jpeg|gif)/i,use:¨E91E¨E123Eloader:′url¨E45Eloader′,options:¨E123E//当加载的图片，小于limit时，会将图片编译成base64字符串形式//反之，需要使用file¨E45Eloader没模块进行加载limit:13000,//¨E91E¨E93E表示变量name:′img/¨E91Ename¨E93E.¨E91Ehash:8¨E93E.¨E91Eext¨E93E′¨E125E¨E125E¨E93E¨E125E,¨E123Etest:/¨E92E.m?js/i, use: [ { loader: 'url-loader', options: { //当加载的图片，小于limit时，会将图片编译成base64字符串形式 //反之，需要使用file-loader没模块进行加载 limit: 13000, //[]表示变量 name: 'img/[name].[hash:8].[ext]' } } ] }, { test: /\.m?js/i,use:¨E91E¨E123Eloader:′url¨E45Eloader′,options:¨E123E//当加载的图片，小于limit时，会将图片编译成base64字符串形式//反之，需要使用file¨E45Eloader没模块进行加载limit:13000,//¨E91E¨E93E表示变量name:′img/¨E91Ename¨E93E.¨E91Ehash:8¨E93E.¨E91Eext¨E93E′¨E125E¨E125E¨E93E¨E125E,¨E123Etest:/¨E92E.m?j exclude: , : { : , : { : [] } } }, { : s/,//exclude 排除，include包含/(node_modules|bower_components)/useloader'babel-loader'optionspresets'es2015'test/\.vue/,use:¨E91E′vue¨E45Eloader′¨E93E¨E125E¨E93E¨E125E,resolve:¨E123Ealias:¨E123E′vue/, : [] } ] }, :{ : { use'vue-loader'resolvealias'vue/,use:¨E91E′vue¨E45Eloader′¨E93E¨E125E¨E93E¨E125E,resolve:¨E123Ealias:¨E123E′vu: } }} e'"vue/dist/vue.esm.js"
  • 2 . prod.config.js const uglifyjsWebpackPlugin = require('uglifyjs-Webpack-plugin') const webpackMerge = require('webpack-merge') const baseConfig = require('./base.config') module.exports = webpackMerge(baseConfig, {plugins:[ new uglifyjsWebpackPlugin() ] })
  • 3 . dev.config.js const webpackMerge = require('webpack-merge') const baseConfig = require('./base.config') module.exports = webpackMerge(baseConfig, { devServer:{ contentBase: "./dist", inline: true } })
  • 修改配置文件package.json

在这里插入图片描述

注：以上安装的模块的版本要对应！！！

学习视频： https://www.bilibili.com/video/BV15741177Eh?p=90&spm_id_from=pageDriver

念

HTML Webpack Plugin这是一个webpack插件，它简化了HTML文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。

安装

针对webpack的版本，需要安装对应不同的版本。

webpack4

npm i --save-dev html-webpack-plugin@4

webpack5

  npm i --save-dev html-webpack-plugin

使用

这个插件会为你生成一个HTML5文件，其中包含了使用script标签的所有webpack的bundle。

只需将插件添加到webpack配置中，如下所示：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js",
    output: {
        filename:"index_bundle.js",
        path: path.resolve(__dirname,"dist")
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

这将生成一个包含以下内容的文件dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果您有多个webpack入口点，它们都将与script标签一起包含在生成的HTML中。

如果你在webpack的输出中有任何CSS资产(例如，用mini-css-extract-plugin提取的CSS)，那么这些将包含在HTML头部的标签中。

如果你有使用它的插件，html-webpack-plugin应该在任何集成插件之前。

选项

你可以传递一个配置选项到html-webpack-plugin。允许的值如下：

  • title

类型：String

默认值：Webpack App

描述：要用于生成的HTML文档的标题。

  • filename

类型：String或Function

默认值：index.html

描述：要写入HTML的文件的文件名。默认为index.html。您也可以在这里指定一个子目录(例如:assets/admin.html)。占位符[name]将被条目名称替换。也可以是一个函数，例如(entryName) => entryName + '.html'。

  • template

类型：String

默认值：空

描述：默认情况下，它将使用src/index.ejs(如果存在的话)。

  • templateContent

类型：string|Function|false

默认值：false

描述：可以用来代替模板提供一个内联模板。

  • templateParameters

类型：Boolean|Object|Function

默认值：false

描述：允许覆盖模板中使用的参数。

  • inject

类型：Boolean|String

默认值：true

描述：true || 'head' || 'body' || false将所有资产注入到给定的模板或templateContent中。当传递'body'时，所有javascript资源将被放置在body元素的底部。'head'将把脚本放置在head元素中。设置为true时，将根据scriptLoading选项，决定是把脚本添加到head还是body中。使用false禁用自动注入。

  • publicPath

类型：String|'auto'

默认值：auto

描述：publicPath属性值用于script和link 标签。

  • scriptLoading

类型：blocking|defer

默认值：defer

描述：现代浏览器支持非阻塞javascript加载(“defer”)，以提高页面启动性能。

  • favicon

类型：String

默认值：空

描述：将给定的图标路径添加到输出的HTML中。

  • meta

类型：Object

默认值：{}

描述：允许注入meta标签。例如:meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}。

  • base

类型：Object|String|false

默认值：false

描述：注入一个base标签。如base:“https://example.com/path/page.html

  • minify

类型：Boolean|Object

默认值：如果mode为'production'则为true，否则为false

描述：控制是否以及以何种方式压缩输出。

  • hash

类型：Boolean

默认值：false

描述：如果为true，则附加一个唯一的webpack编译哈希到所有包含的脚本和CSS文件。这对于缓存销毁是很有用的

  • cache

类型：Boolean

默认值：true

描述：只有当文件被更改时，才会删除它。

  • showErrors

类型：Boolean

默认值：true

描述：错误的详细信息将写入HTML页面。

  • chunks

类型：?

默认值：?

描述：只允许添加一些chunk(例如：只添加unit-test 的chunk)

  • chunksSortMode

类型：String|Function

默认值：auto

描述：允许控制块在包含到HTML之前应该如何排序。允许的值是'none' | 'auto' | 'manual' | {Function}。

  • excludeChunks

类型：Array.<string>

默认值：空

描述：允许你跳过一些chunk(例如不添加unit-test 的chunk)。

  • xhtml

类型：Boolean

默认值：false

描述：如果为true，则将link标签呈现为自动关闭(XHTML兼容)

下面是一个webpack配置示例，演示了如何使用这些选项：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html'
    })
  ]
}

生成多个HTML文件

要生成多个HTML文件，请在插件数组中多次声明插件。

配置示例：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

编写模板

如果默认生成的HTML不能满足您的需要，您可以提供自己的模板。最简单的方法是使用template选项并传递一个定制的HTML文件。html-webpack-plugin会自动将所有必需的CSS, JS, manifest和favicon文件注入到标记中。

配置文件的部分内容：

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    // Load a custom template (lodash by default)
    template: 'index.html'
  })
]

模板文件index.html的内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

如果您已经有一个模板加载器，您可以使用它来解析模板。请注意，如果您指定了html加载器并使用.html文件作为模板，也会发生这种情况。

module: {
  loaders: [
    { test: /\.hbs$/, loader: "handlebars-loader" }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template using Handlebars',
    template: 'index.hbs'
  })
]

您可以使用现成的lodash语法。如果inject特性不适合你的需要，而你又想完全控制资产的位置，可以使用html-webpack-template项目的默认模板作为你自己编写模板的起点。


在线咨询
上一篇：JavaScript实现HTML轮播，简单有效
下一篇：十大视频搬运网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 宝山区 精河县 岳阳 梅江区 长洲区 下花园区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服