webpack的学习(二)

webpack不通过命令的形式指定入口和出口进行打包构建

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

const path = require('path')

 

//这个配置文件，其实就是一个 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拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建