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就可以了。