第三节:Webpack打包HTML文件资源

前言:

通过前面的学习,已经知道如果打包js和json文件,也了解了如何配置打包样式文件的loader

但是之前我们都是手动的创建html,并且手动的引入打包后的js文件,这样会有一定的不便,

因此接下来就一起看看webpack是如何处理html文件的

1. 安装使用处理html的插件

说明:

webpack打包html文件资源,不是使用loader而是使用插件
使用html-webpack-plugin插件自动生成html文件

1.1 下载插件

$ yarn add html-webpack-plugin -D

1.2 配置插件

在webpack.config.js中配置插件说明

引入下载好的插件
在plugins中配置插件

代码如下:


// 1. 引入处理html插件,
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path");

module.exports = {
    entry: "./src/main.js",
    output:{
        filename:"bundle.js",
        path: resolve(__dirname,"dist")
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    },
    // 配置插件
    plugins:[
        // 配置 处理html插件
        new HtmlWebpackPlugin()
    ],
    mode:"development"
}

1.3 打包

使用webpack命令打包后

会发现dist打包目录中多出一个index.html文件,在文件里自动引入打包后的bundle.js

但是此时index.html是一个空的html文件 ,没有其他结构内容

配置好了以后,我们在配置打包脚本

2. 配置本地webpack

2.1 配置本地webpack说明

webpack版本的不同,可能会对项目造成影响
项目是多人协同开发,如果每一个人电脑都全局安装不同的webpack,会导致项目配置出问题
因此需要配置项目本地webpack,已经配置脚本运行webpack命令

2.2 下载配置本地webpack

下载本地webpack

$ yarn add webpack webpack-cli -D

2.3 配置脚本命令

配置脚本命令使用webpack打包说明

在所有的终端里使用webpack命令,默认都是全局安装的webpack
项目为了保证统一,需要使用项目本地webpack进行打包
脚本中运行的webpack是使用本地webpack命令

在package.json中配置脚本命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

配置完成以后就可以使用npm run build命令来使用webpack了

3. 将我们自己写html内容插入打包后的html文件

3.1 说明

src文件夹使我们开发文件夹,因此我们可能会在这个文件夹中开发html文件内容
但是html-webpack-plugin会在打包的dist目录中生成新的html文件,
新生成的文件中,不包含我们开发的html文件内容
如果我们需要将自己开发的html内容也插入到打包后的html文件中,就需要配置

3.2 在src文件中新建html,并开发内容

<body>
    <h2>这是标题</h2>
</body>

3.3 在`webpack.config.js`配置插件

在webpack.config.js的插件html-webpack-plugin中配置html模板

将我们开发的html文件中的内容插入到plugin生成的html文件中

 plugins:[
    new HtmlWebpackPlugin({
        // 配置,告诉插件将那个html内容插入到打包后的html文件中
      template:"./src/index.html"
    })
  ],

此时,使用npm run build命令打包后, 查看dist目录中index.html文件中就拥有了我们开发的内容