push动态加key_使用 webpack 动态生成 html

最新推荐文章于 2023-09-13 09:38:41 发布

桑晗博

最新推荐文章于 2023-09-13 09:38:41 发布

阅读量460

点赞数

文章标签： push动态加key

本文链接：https://blog.csdn.net/weixin_30373263/article/details/113312169

版权

本文介绍了如何使用html-webpack-plugin动态创建HTML文件，避免在多页项目中手动创建多个相似的模板文件。通过配置webpack.config.js，我们可以动态生成html，并在打包时自动引入打包后的JS文件，简化前端构建流程。

摘要由CSDN通过智能技术生成

第 9 阶段：搞懂、搞透前端构建第 5 天，昨天内容详细介绍了 webpack 的 plugin，非常重要：搞定 webpack 的 plugin 不在话下

在前面的课程中，我们都是手动创建一个 index.html 文件，通过 script 标签引入被打包后文件：

但是这样有很大的不便。在「多页」项目中，会有非常多的 html 模板，这些模板长的基本一样，这样我们需要创建多个一模一样的 html 模板文件，且需要「写死」打包路径。那么有没有方法可以对 html 进行动态创建呢？

html-webpack-plugin 可以创建 html，也可以使用模板，动态配置数据。今天我们用 webpack 来管理 html。

由于前面已经带大家创建了几个项目，套路一致，不懂的可以看 webpack 究竟是什么，初学者晕头转向，安装 webpack 搞定 Vue 打包，从使用 loader 到实现 loader · webpack 这几节内容。

1、创建项目 day5-html-webpack-plugin：

这次没有像前几节内容创建 html，所有的 html 文件将使用 index.tpl.html 打包时动态生成：

2、安装 html-webpack-plugin

在项目根目录执行 npm i --save-dev html-webpack-plugin

3、配置 webpack.config.js

这次和前几次有点不一样，入口对象 entry 单独作为了一个属性来用，这样方便动态生成 html plugin。

plugins 的配置是通过一个自执行函数来生成的，变量 entry 所有的入口，生成不同的 html 文件。

// path 为 node 提供的模块，可直接使用const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');// 定义入口const entry = {    home: './home/index.js',    topic: './topic/index.js'};// 根据入口生成 html pluginsconst plugins = [];!(function(){    let keys = Object.keys(entry);    keys.map(key => {        let htmlPlugin = new HtmlWebpackPlugin({            title: 'webpack训练营',            template: './index.tpl.html',            templateParameters: {                'welcome': '和素燕一起学透 webpack',                'des': '关注公众号素燕，每天学一点'            },            chunks: [key],            filename: `${key}.html`        });        plugins.push(htmlPlugin);    });}());// webpack 的配置其实就是一个对象module.exports = {    // 设置打包方式，支持 development 和 production    mode: 'development',    // 打包入口文件    entry: entry,    // 最终打包结果配置    output: {        filename: '[name].js',        path: path.resolve(__dirname, './dist')    },    plugins: plugins}

4、执行 npm run build

执行完后，会生成 2 个 html 文件：

5. 查看效果

在浏览器中打开 home.html，效果如下：

在浏览器中打开 topic.html，效果如下：

6、看编译结果

我们看看 home.html 最终生成的效果：

<html>  <head>    <meta charset="utf-8"/>    <title>webpack训练营title>    <meta name="viewport" content="width=device-width, initial-scale=1">head>  head>  <body>    <div>和素燕一起学透 webpackdiv>    <div>关注公众号素燕，每天学一点div>    <div id="suyan-gongzhonghao">div>  <script src="home.js">script>body>html>

如果在线上，我们肯定希望能够把 html 压缩，移除所有的注释。html-plugin 支持了很多属性。我们修改一下 html plugin 的生成方法：

// 根据入口生成 html pluginsconst plugins = [];!(function(){    let keys = Object.keys(entry);    keys.map(key => {        let htmlPlugin = new HtmlWebpackPlugin({            // 标题            title: 'webpack训练营',            template: './index.tpl.html',            // 模板额外的参数            templateParameters: {                'welcome': '和素燕一起学透 webpack',                'des': '关注公众号素燕，每天学一点'            },            // 这个 html 使用哪个输出结果，可使用多个            chunks: [key],            filename: `${key}.html`,            // 压缩处理            minify: {                removeComments: true,                collapseWhitespace: true            },            // meta 标签            meta: {                charset: { charset: 'utf-8' },                viewport: 'width=device-width, initial-scale=1'            },            // 控制 script 标签插入的位置            inject: "head",            favicon: 'favicon.png',        });        plugins.push(htmlPlugin);    });}());

执行 npm run build 后，home.html 已经发生了很大变化。部分截图：

这节内容能够帮我们动态生成 html，有一点需要注意一下，webpack.config.js 文件这次加入了函数、变量，这使得配置可以「动态化」，比如对应多个不确定的 entry，可以通过变量项目文件来动态生成入口，plugin 根据不同的环境来使用不同的 plugin。还有一个问题，需要大家思考一下，html-webpack-plugin 是如何实现的呢？

最后，诚挚邀请你来思考下面的问题并打卡：

1、平时工作中你用到了哪些 plugin，它们的作用是啥？

大家加油！

demo: https://github.com/lefex/FE/tree/master/webpack

推荐阅读： 搞定 webpack 的 plugin 不在话下