对于webpack基础不好，node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的，有种无从下手的感觉。然而，从头看这2块，耗时太长，而且说实话得练才行，不练练手看不明白。那大多数人就采取折中的方案，修改成熟的脚手架，改成自己想要的样子。这个相对来说难度降低了不少，不过依然会有很多难点不加不明白。所以这里就以Vue的脚手架为例子，将源码加上注释，方便大家加深对项目配置的理解，少走弯路。
二、vue-cli 都做了什么
先跟大家简单说说，vue-cli 都做了什么，大家也对他有个大体的了解
1、build/dev-server.js 文件 项目node的启动文件，这里面做了webpack配置和node操作，
2、build/webpack.base.conf.js webpack基本配置文件
3、build/webpack.dev.conf.js 开发环境webpack配置
4、build/webpack.prod.conf.js 正式环境的webpack配置
5、build/build.js 执行打包的配置文件
6、config/index.js 开发、线上环境的文件输出、打包等一些配置
这是脚手架里面的一些主要配置文件，通过配置，整个项目分为开发环境和生产环境，不需要你多做很多繁琐的工作，用起来很方便，如果你想按照自己的喜好或者需求，可以修改主题文件的配置，下面我们就附上上述每个文件的代码和注释。 ps：代码我修改过，不是完全一样的，大家主要看看文件功能，和一些代码、组件的含义。
三、具体文件代码详解
1、build/dev-server.js
// 检查 Node 和 npm 版本 require('./check-versions')() // 获取 config/index.js 的默认配置 var config = require('../config') // 如果 Node 的环境无法判断当前是 dev / product 环境 // 使用 config.dev.env.NODE_ENV 作为当前的环境 if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) } // 一个可以强制打开浏览器并跳转到指定 url 的插件 var opn = require('opn') // 使用 NodeJS 自带的文件路径工具 var path = require('path') // 使用 express var express = require('express') // 使用 webpack var webpack = require('webpack') // 使用 proxyTable 热更新 var proxyMiddleware = require('http-proxy-middleware') // 使用 dev 环境的 webpack 配置 var webpackConfig = require('./webpack.dev.conf') // 使用axios请求 var axios = require('axios') // 如果没有指定运行端口，使用 config.dev.port 作为运行端口 var port = process.env.PORT || config.dev.port var autoOpenBrowser = !!config.dev.autoOpenBrowser // 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置 var proxyTable = config.dev.proxyTable // 使用 express 启动一个服务，URL改一下，这里是做服务转发，还可以对 var app = express() var apiRoutes = express.Router() apiRoutes.get('/getDiscList', function (req, res) { var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' axios.get(url, { headers: { referer: 'https://c.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { res.json(response.data) }).catch((e) => { console.log(e) }) }) apiRoutes.get('/lyric', function (req, res) { var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg' axios.get(url, { headers: { referer: 'https://c.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { var ret = response.data if (typeof ret === 'string') { var reg = /^\w+\(({[^()]+})\)$/ var matches = ret.match(reg) if (matches) { ret = JSON.parse(matches[1]) } } res.json(ret) }).catch((e) => { console.log(e) }) }) app.use('/api', apiRoutes) var compiler = webpack(webpackConfig) // 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true }) // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {} }) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) // 将 proxyTable 中的请求配置挂在到启动的 express 服务上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) }) // 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址 app.use(require('connect-history-api-fallback')()) // 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上 app.use(devMiddleware) // 将 Hot-reload 挂在到 express 服务上 app.use(hotMiddleware) // 拼接 static 文件夹的静态资源路径 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 为静态资源提供响应服务 app.use(staticPath, express.static('./static')) var uri = 'http://localhost:' + port var _resolve var readyPromise = new Promise(resolve => { _resolve = resolve }) console.log('> Starting dev server...') devMiddleware.waitUntilValid(() => { console.log('> Listening at ' + uri + '\n') // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址 if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } _resolve() }) // 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露 var server = app.listen(port) module.exports = { ready: readyPromise, close: () => { server.close() } }