src源文件

没有配置的时候回告诉你没有配置model所以使用默认的打包方式

******************************************************************************

基本设置：

一、打包模式

二、配置打包入口

三、配置打包出口

四、配置devtool

*******************************************************************************

一、

操作：

development : 开发模式

这时候的main.js

production: 生产模式

这时候的main.js

二、配置打包入口

（入口文件：从那个地方开始打包）

默认打包入口：src下的index.js

在webpack中：

默认入口是：./src/index.js

默认出口是：./dist/main.js。

在你没有写任何配置文件（或者配置文件中没有修改入口设置）时，webpack会直接去找src下的index.js，并把打包之后的代码放在dist/main.js下。

重新配置入口文件

三、配置打包出口

output: {

    "path": path.join(__dirname,'/build'), // 决定出口文件在哪里，必须是绝对地址,path.join路径拼接

    "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js

  }

说明：

output中的filename用来指定打包后的文件名字。

output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。

如果path中的路径不存在，它会自动创建。

四、配置devtool

有了这个当我们打包前js代码中有错误时候，打包后是无法找出错误

而这个可以帮我们找出错误

假设打包的时候有一个错误

错误发现不了就进入了打包后的文件

这时候引入肯定会报错

为了解决这个问题，我们需要devtool配置项。

devtool

此选项控制是否生成，以及如何生成 source map。source map用来映射打包前的源代码和打包后的目标文件之间的关系，方便我们调试(当代码有错误时，能找到这个错误是在哪个源代码中)。

在生产阶段可以设置：cheap-module-source-map

在开发阶段可以设置：cheap-module-eval-source-map

使用之后，就会告诉我们错误在哪

当我们设置 devtool: 'source-map',就会多一个.map文件用来映射打包前的源代码和打包后的目标文件之间的关系，方便我们调试(当代码有错误时，能找到这个错误是在哪个源代码中)。

小结

webpack的配置文件默认名是webpack.config.js

学习webpack主要就是学习webpack.config.js的使用。

自行定义: entry,output,mode, devtool