vue.js开发外卖App项目总结之webpack的详细配置(三)

在运行的页面中，只有index.html和app.js，而源码没有编写app.js，index.html也没有引用任何的资源，原因是使用webpack编译。

webpack的入口是package.json文件，运行npm run dev即运行node build/dev-server.js，其实是运行bulid目录下的dev-server.js文件

如图为dev-server.js文件

其中一开始定义了各种依赖。path是node的一个api，提供文件路径的一些操作方法；express是node.js的运行框架，用它启动一个webServer；webpack是核心编译工具，webpack也提供了Node.js的API，可以在node.js中引入webpack进行编译；而config为配置文件，即config目录下的index.js文件。proxyMiddleware为http代理的中间件，代理和转发我们需要的一些API；
webpackConfig为webpack的一些相关配置，因为是开发时的配置，所以引入webpack.dev.conf文件；

接下来查看webpack.dev.conf.js文件

其中var merge = require('webpack-merge')，merge是合并配置文件使用的；utils是一些工具方法；baseWebpackConfig也是webpack的配置文件，它是被开发时和运行时的webpack文件所共享的；HtmlWebpackPlugin是webpack提供的操作html文件的插件；

接下来查看webpack.base.conf.js文件


projectRoot定义了当前项目的根目录，../表示回退到上一级。
module.exports是webpack的一些基本配置，
其中entry为入口配置，表示webpack编译的入口js文件为./src/main.js。
output为输出的配置，path为输出的文件路径，
path: config.build.assetsRoot,对比下图，即在当前目录即build下面创建一个dist目录，作为输出目录；而publicPath为请求的绝对路径，即publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath；对应下图中的assetsPublicPath: '/',；而filename为输出的文件名称，即filename: '[name].js'，其中name对应entry中的key，即app，即app.js，所以在页面中引入的app.js就是这么得来的。
resolve这一块是在代码中通过require或者es6的import模块的一些相关配置，其中extens