使用webpack插件

image.png

使用HtmlWebpackPlugin

通过HtmlWebpackPlugin解决打包后需要手动引入出口文件问题。

  1. // 在项目根目录下安装这个插件
  2. npm install --save-dev html-webpack-plugin

配置插件

  1. // 在项目根目录创建webpack.config.js文件
  2. // 这个文件时运行在node上的，所以需要使用commonjs来导入导出，
  3. const path = require("path")
  4. const HtmlWebpackPlugin = require("html-webpack-plugin")
  5. module.export = {
  6.   // 设置入口文件
  7.   entry:"./src/index.js",
  8.   // 设置出口
  9.   output:{
  10.     // 指定输出文件的文件名
  11.     filename:"bundle.js",
  12.     // 指定输出路径，设置为绝对路径，通过node的path，
  13.     // 通过path.resovlve将路径拼接为绝对路径
  14.     // __dirname 是webpack.config.js文件所在的根路径
  15.     path:path.resolve(__dirname,"./dist"),
  16.     // 清除dist旧内容
  17.     clean:true
  18.   },
  19.   // 不设置mode时可赋值为none
  20.   mode:"none",
  21.   // 使用插件是需要现实例化插件（插件是一个类）
  22.   plugins: [
  23.     new HtmlWebpackPlugin({
  24.       // 配置模板，一般指定为index.html，配置后网页title等将与模板统一
  25.       template:"./index.html",
  26.       // 配置输出的文件的文件名
  27.       filename:"app.html",
  28.       // 设置引入文件在哪里引入,设置为在body中引入
  29.       inject:"body"
  30.     })
  31.   ]
  32. }
  33. // 配置号配置文件后，就可以直接使用npx webpack 打包，后面不用跟别的命令

清除dist残留内容

在output中添加clean：true属性