webpack学习(四)-html资源打包

鱼鱼大仙的猫 9/7/2020 webpack

# 安装插件

npm i html-webpack-plugin -D

webpack打包html文件需要使用 html-webpack-plugin 插件来进行打包，所以我们需要对plugins进行配置

# plugin配置

// 引入"html-webpack-plugin"插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13

html-webpack-plugin 会默认创建一个空的HTML，自动引入打包输出的所有资源(JS/CSS)；而 template 参数表示复制该html文件并自动引入打包的JS/CSS资源。

运行 webpack 后，我们会发现，html中会自动引入打包后的js资源。