Webpack自动生成html

webpack自动生成html#

插件html-webpack-plugin ：在Webpack打包时生成html文件

步骤：

1. 下载html-webpack-plugin插件
2. 配置webpack.config.js让Webpack拥有插件功能
3. 重新打包观察效果

html-webpack-plugin插件使用#

以案例03heima_TouTiao项目为例

下载软件包

npm i html-webpack-plugin --save-dev

下载完成后开始配置webpack.config.js

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

module.exports = {
    entry: path.resolve(__dirname, 'src/login/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'login/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/login.html'), // 模板文件
            filename: path.resolve(__dirname, './dist/login/index.html'), // 输出文件
        }),
    ],
};

配置项解释：

• template：以属性中的html文件作为模板生成新的html，按官方文档描述，若不配置此项，则默认生成只含有默认标签的无其他结构的空的html
• filename：生成html文件的名字，也可以指定其目录

配置完成开始打包

打包效果：