webpack打包html插件html-webpack-plugin的使用

webpack打包html插件html-webpack-plugin的使用

1.创建这样的测试目录结构
1）index.html是即将被打包的文件，你可以随便写一些内容
2）index.js是打包的入口文件，你可以写或不写内容

2.webpack.config.js的代码如下：

/**
 * 压缩html需要插件：html-webpack=plugin
 * 插件使用方法：下载，引入，使用
 * loader使用方法：下载，使用
 */
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入插件
const {
  resolve
} = require('path'); // 使用resolve处理绝对地址
const config = {
  // 入口文件
  entry: './src/index.js',
  output: {
    // 输出文件名
    filename: 'bundle.js',
    // resolve处理绝对路径
    // __dirname代表当前文件的绝对路径，输出文件放到该路径的dist中
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // loader 配置
    ]
  },
  plugins: [
    // HtmlWebpackPlugin默认功能为创建空的html文件，并引入输出的js文件
    // 通过配置template将指定文件的body内容加入到创建的html文件中
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 指定为开发模式
  mode: "development"
};
module.exports = config;

3.安装插件html-webpack-plugin到开发环境

cnpm install html-webpack-plugin -D

4.运行打命令

webpack

如果没有装webpack和webpack-cli需要安装一下，代码如下：

cnpm install webpack webpack-cli -D