我们想象一下，为什么我们在项目中可以处理less，可以引入图片，可以使用js的高级特性等，而我们的游览器并不能解析他们，却依然得到了我们想要的结果，那是谁在帮我们做这一件事呢？答案显而易见----webpack。
现在的脚手架都已经把这些功能集成，但是我们还是要学习webpack一些常规配置，去理解他是怎么处理这些文件的。
那我们一步一步的来配置webpack吧！
1.yarn init -yes 新建一个文件夹，当然需要node环境的，初始化package.json。
2.yarn add webpack webpack-cli --dev 安装wenpack和webpack-cli。webpack-cli的作用是直接在项目下使用webpack命令，不需要使用yarn webpack。(我遇到麻烦了，webpack命令不生效，只能用yarn webpack，目前不知道原因)。
3.在根目录下新建index.html文件。创建src文件夹。新建js文件如下图所示。
经过上述创建过程，我们可以使用npm run build 对文件进行直接打包。运行之后，我们可以得到一个dist文件夹，也就是我们打包成功了！显然，在我们没有写webpack.config.js时，webpack会默认去src下寻找index.js作为入口，通过import导入方法创建依赖图，自动完成构建。
我们已经完成了第一步，接下来就是配置webpack啦！
4.在根目录下创建webpack.config.js。加入 entry，output属性。设置导入起始文件和导出路径。entry可以是相对路径，ouput必须是绝对路径.
我们在src下创建了app.js，这是我们新的打包入口。
运行npm run build，发现在根目录下多了一个build的文件夹，而boudle.js就是我们从app.js入口进行打包生成的文件。
补充：output中的publicPath属性
是指index.html引用其他资源的路径。域名 + publicPath + filename。
比如本来一个index.html同级下js文件的引用时'./boundle.js'，当修改publicPath为'./js'，这时候index.html中引用的地址变为'./js/boundle.js'，这时候就会出错。
webpack学习的第一步我们就完成啦，学习了打包入口和出口的配置，接下来我们要学习css的打包啦！
