webpack学习笔记（三）—— webpack最基本的文件配置以及webpack是如何执行的

问题：每次改变main.js中的代码都需要运行`webpack .\src\main.js .\dist\bundle.js`页面才会出现变化，怎样简化？

答案：配置webpack,在配置文件中指定入口文件和出口文件

步骤如下：

一 创建webpack配置文件——webpack.config.js

这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象

配置内容如下

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

二输入命令 webpack

webpack

这样输出的js文件就更新了

webpack是如何执行的

备注：当我们在控制台，直接输入webpack命令执行时，webpack做了以下几步

1首先 webpack并没有发现我们通过命令的形式，给它指定入口和出口

2 webpack就是去项目的根目录中，查找一个叫做`webpack.config.js`的配置文件

3当找到配置文件后，webpack回去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象

4当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建