webpack学习（二）初识打包配置

前言：webpack打包工具让整个项目的不同文件夹相互关联，遵循我们想要的规则。想 .vue文件， .scss文件浏览器并不认识，因此webpage暗中做了很多转译，编译等工作。

　　　事实上，如果我们在没有加配置文件之前 webpack是有默认配置的，比如在项目最开始的时候我们没有加上webpack.config.js,但是我们依然可以终端运行 npx webpack index.js

　　　来进行打包。但是这并不能满足一个项目中繁杂的各种文件的配置，因此我们可以自己配置符合当前项目的 配置文件-->webpack.config.js。

第一步：在项目中第一级目录添加webpack.config.js文件。

第二部：编写打包的入口，各种配置项和打包出口

第三部：导出配置

如下图：

上图是最基础的打包配置：

　　1，打包的入口文件是index.js,它的路径是 "./src/index.js"。main的意思是默认打包成main.js。

　　2， 打包的出口文件可以随意设置，比如：bundle.js。引入path模块并使用 path.resolve()方法，

　　　　使得在src平级目录下创建dist（随意起名都可以）文件夹来存放bundle.js等文件。

　　3，在入口，出口配置之间应该有很多按照我们需求的很多配置，本篇只是初识基本配置，后面继续记录。

另外，如果习惯了用 npm，可以在package.json文件中的脚本配置中这样写：

这样打包的时候 运行 npm run bundle就可以了。

 最后：来看看如果项目打包命令行里都是一些什么

上图是一次打包：

1：本次打包对应的唯一一个哈希值。

2：本次打包所使用的webpack版本。

3：本次打包耗时。

4：本次打包的日期。

5：本次打包出的文件，文件的大小，chunks相当于文件的身份id。

6：打包的入口文件，默认名 main

7：打包所涉及到的文件，一些模块文件和各种业务文件等。