hooyantsing's Blog

P06 打包html资源

字数统计: 312阅读时长: 1 min
2020/11/28

尚硅谷2020最新版Webpack5实战教程

编写webpack配置文件

想要打包html资源,需要使用到 html-webpack-plugin 插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
loader:1.下载 2.使用(配置loader)
plugins:1.下载 2.引入 3.使用
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname,'build')
},
module: {
rules: [

]
},
plugins: [
// 插件配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)
template:'./src/index.html'
})
],
mode: 'development'
}
踩坑

开发环境:

  • webpack 5.8.0
  • webpack-cli 4.2.0

控制台下载插件:

1
npm i html-webpack-plugin -D

插件默认下载的版本是:4.5.0

和 webpack5不兼容

使用命令卸载上面安装的版本

1
npm uninstall html-webpack-plugin

下载兼容版本:

1
npm install html-webpack-plugin@5.0.0-alpha.9

这样,就可以正常编译了。

参考:https://blog.csdn.net/Kindergarten_Sir/article/details/110083041

打包

默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)

CATALOG
  1. 1. 编写webpack配置文件
    1. 1.1. 踩坑
  2. 2. 打包