9.webpack-配置打包的入口与出口

1. 修改 webpack.config.js 文件 添加入口和出口配置

const path = require("path") // 导入 node.js 中专门操作路径的模块

module.exports = {
  // mode 用来指定构建模式
  mode: "development", // development production
  entry: path.join(__dirname, "./src/index.js"), // 打包入口文件的路径
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件的存放路径
    filename: "bundle.js" // 输出文件的名称
  }

}

2. 运行打包命令

npm run dev

3. 查看打包结果
   
4. 修改 index.html 的 script 引用
   注释掉之前引入的 main.js 文件 添加 bundle.js 文件的引入

5. 查看浏览器结果
   没有报错