webpack5之HtmlWebpackPlugin插件

最新推荐文章于 2024-06-21 10:33:19 发布

、昔年

最新推荐文章于 2024-06-21 10:33:19 发布

阅读量2.7k

点赞数

分类专栏： webpack 文章标签： webpack webpack-cli

本文链接：https://blog.csdn.net/weixin_43760969/article/details/109098882

版权

webpack 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

当我们更改了webpack.config.js一个入口起点的名称，或者添加了一个新的名称，生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字，此时运行页面或报错，所以用 HtmlWebpackPlugin 来解决这个问题

先看看出错的情况，将上一篇文章的webpack.config.js文件的entry入口文件的app改为app1

index.html

<!doctype html>
<html>
    <head>
        <title>webapck</title>
        <script src="./print.bundle.js"></script>
    </head>
    <body>
        <script src="./bundle.js"></script>
    </body>
</html>

webpack.config.js
- 注意，入口文件中的app已经改为app1，但是index.html仍然使用app.bundle.js文件，运行结果如下图

const path = require('path');
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 打包入口
  entry: {
    // app: './src/index.js',
    app1: './src/index.js',
    print: './src/print.js'
  },
  // 输出
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在这里插入图片描述

使用html-webpack-plugin

安装html-webpack-plugin插件

npm install --save-dev html-webpack-plugin

index.html
- 需要注意的是，不在header中添加‘print.bundle.js’文件也可以得到一样的结果，该demo只是进行演示

<!doctype html>
<html>
    <head>
        <title>webapck</title>
        <script src="./print.bundle.js"></script>
    </head>
    <body>
        <script src="./bundle.js"></script>
    </body>
</html>

index.js

import _ from 'lodash'
// 导入print.js文件
import printMe from  './print.js'
function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');
  
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    
    
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;
    element.appendChild(btn);


    return element;
  }
  
  document.body.appendChild(component());

print.js

export default function printMe () {
    console.log('print.js');
}

webpack.config.js
- 注意，entry是一个对象，而不是一个字符串，表示有多个入口文件
- output的是filename是 ‘[name].bundle.js’，’[name]'是entry对象的文件入口字段

const path = require('path');
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 打包入口
  entry: {
    app1: './src/index.js',
    print: './src/print.js'
  },
  // 输出
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // plugins进行插件的配置
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]
};

package.json

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

特别注意的是，使用html-webpack-plugin插件会在dist文件夹下生成一个新的index.html文件，内容如下

<!doctype html><html><head><meta charset="utf-8"><title>Output Management</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="app1.bundle.js"></script><script src="print.bundle.js"></script></body></html>

这时候修改以下webpack.config.js文件的入口文件

const path = require('path');
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 打包入口
  entry: {
    app1111: './src/index.js',
    print: './src/print.js'
  },
  // 输出
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // plugins进行插件的配置
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]
};

自动生成的index.html，注意的是，引入的script已经自动更新，不用手动更新

<!doctype html><html><head><meta charset="utf-8"><title>Output Management</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="app1111.bundle.js"></script><script src="print.bundle.js"></script></body></html>

npm run build 运行结果如下

、昔年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack5之HtmlWebpackPlugin插件

当我们更改了webpack.config…js一个入口起点的名称，甚至添加了一个新的名称，生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字，此时运行页面或报错，所以用 HtmlWebpackPlugin 来解决这个问题先看看出错的情况，将上一篇文章的webpack.config.js文件的entry入口文件的app改为app1index.html<!doctype html><html> <head>
复制链接

扫一扫

专栏目录