（六）打包HTML

HtmlWebpackPlugin 会在打包结束后，自动化生成一个html文件，并把打包生成的js文件自动引入到这个html文件中。

安装

npm install --save-dev html-webpack-plugin

使用

修改webpack.config.js：

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

module.exports = {
  mode: 'production',
  // 打包文件
  entry: './index.js',
  // 产生新index.html
  // plugins 可以在webpack运行到某个时刻的时候，帮忙做一些事情
  // plugins: [new HtmlWebpackPlugin()],
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',       // 模板
      filename: 'assets/admin.html'
    })
  ]
}

清除原来的打包文件

安装 npm install --save-dev clean-webpack-plugin，使用

var CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  mode: 'production',
  // 打包文件
  entry: {
    main: './index.js',
    abc: './index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      // publicPath: 'http://baidu,com',    // 打包文件加载添加地址  
      template: 'index.html',               // 模板
    }), new CleanWebpackPlugin(['bundle'])
  ],
  // 打包好的文件放置
  output: {
    // filename: 'bundle.js',  // 重命名打包后的文件
    filename: '[name].js',
    // 放置路径
    /**
     * 打包好的文件放置路径
     * __dirname 是指当前webpack.config.js所在的当前目录
     * 与bundle结合：即在当前目录下生成bundle文件夹
     */
    path: path.resolve(__dirname, 'bundle')
  },
}

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下

安装

使用

清除原来的打包文件

标签

参与社区