3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口

在项目根目录下新建webpack.config.js文件

webpack.config.js文件配置如下：

// Node的路径操作使用的是path模块
const path=require('path')
// 这是node的语法，webpack是基于node来构建的，所以可以在这写node的语法
// 这个配置文件，其实就是一个JS文件，同Node中的模块操作，向外暴露了一个配置对象
module.exports = {
     
    // 在配置文件中，需要手动指定 入口 和 出口
    entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用 webpack 打包哪个文件
    output:{//输出文件相关的配置
        path:path.join(__dirname,'./dist'),//指定 打包好的文件，输出到哪个目录中去
        filename:'bundle.js' //这是指定 输出的文件的名称
    }
}


// 当我们在控制台，直接输入webpack命令的时候，webpack做了以下几步：
// 1.首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口
// 2.webpack就会去项目的根目录中，查找一个叫做'webpack.config.js' 的配置文件
// 3.当找到配置文件后，webpack会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
// 4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；