在html项目中使用webpack编译es6语法

前言：在html项目中遇到了使用import导入npm安装的依赖包，结果就是在浏览器中报错。然后开始了各种的解决方式，最后通过webpack对代码进行编译打包，然后再引入到html页面，从而解决代码报错。

写法一：

步骤：（不写webpack.config.js文件）

第一步：如果项目中没有package.json文件，需要先初始化包管理器  npm i -y

第二步：安转webpack  npm webpack webpack-cli -D

第三步：打包文件  npx webpack ./src/main.js --mode=production 【其中./src/mian.js是要被打包的文件路径，--mode=production是打包模式为生产模式】

第四步：在html页面引入打包生成的文件 ./dist.mian.js (这是我项目中打包生成文件的路径)

写法二：

步骤：（新建webpack.config.js文件）

第一二步：同写法一的1、2步。

第三步：创建webpack.config.js文件

const path = require("path")
module.exports={
  entry:'./src/main.js', //相对路径
  output:{
    path:path.resolve(__dirname,"dist"),//绝对路径
    filename:'main.js'
  },
  mode:'production'
}

第四步：在终端 npx webpack 进行打包

第五步：在页面中引入