├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json

  "scripts": {"dev": "node build/dev-server.js","build": "node build/build.js","lint": "eslint --ext .js,.vue src"},

require('./check-versions')()   /*检查NodeJS和npm的版本*/
var config = require('../config')  // 获取配置
// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的配置作为当前的环境
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
// 一个可以调用默认软件打开网址、图片、文件等内容的插件
// 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var opn = require('opn')
// 一个express中间件，用于将http请求代理到其他服务器
// 例：localhost:8080/api/xxx  -->  localhost:3000/api/xxx
// 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上，方便与服务器对接
var proxyMiddleware = require('http-proxy-middleware')
// 引入相应的 webpack 配置
var webpackConfig = require('./webpack.dev.conf')
// dev-server 监听的端口，默认为config.dev.port设置的端口，即8080
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port// Define HTTP proxies to your custom API backend// https://github.com/chimurai/http-proxy-middleware// 定义 HTTP 代理表，代理到 API 服务器
var proxyTable = config.dev.proxyTable
// 创建1个 express 实例
var app = express()// 数据mock
var appData = require('../static/data.json')//在根目录下放置的一个data.json文件，用以模拟请求的数据
var seller = appData.seller//获取data中的数据对象
var goods = appData.goods
var ratings = appData.ratingsvar apiRoutes = express.Router()//创建一个路由实例

apiRoutes.get('/seller', function(req, res) {//获取数据
  res.json({errno: 0,data: seller})
})apiRoutes.get('/goods', function(req, res) {res.json({errno: 0,data: goods})
})apiRoutes.get('/ratings', function(req, res) {res.json({errno: 0,data: ratings})
})app.use('/api', apiRoutes)// express使用api
// 根据webpack配置文件创建Compiler对象
var compiler = webpack(webpackConfig)
// webpack-dev-middleware使用compiler对象来对相应的文件进行编译和绑定
// 编译绑定后将得到的产物存放在内存中而没有写进磁盘
// 将这个中间件交给express使用之后即可访问这些编译后的产品文件
var devMiddleware = require('webpack-dev-middleware')(compiler, {publicPath: webpackConfig.output.publicPath,stats: {colors: true,chunks: false}
})
// webpack-hot-middleware，用于实现热重载功能的中间件
var hotMiddleware = require('webpack-hot-middleware')(compiler)// force page reload when html-webpack-plugin template changes// 当html-webpack-plugin提交之后通过热重载中间件发布重载动作使得页面重载
compiler.plugin('compilation', function(compilation) {compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {hotMiddleware.publish({action: 'reload'})cb()})
})
// 将 proxyTable 中的代理请求配置挂在到express服务器上
// proxy api requests
Object.keys(proxyTable).forEach(function(context) {var options = proxyTable[context]if (typeof options === 'string') {options = {target: options}}app.use(proxyMiddleware(context, options))
})// handle fallback for HTML5 history API
// 重定向不存在的URL，常用于SPA
app.use(require('connect-history-api-fallback')())// serve webpack bundle output
// 使用webpack开发中间件
// 即将webpack编译后输出到内存中的文件资源挂到express服务器上
app.use(devMiddleware)
// 将热重载中间件挂在到express服务器上
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)// serve pure static assets// 静态资源的路径// 将静态资源挂到express服务器上
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
// 启动express服务器并监听相应的端口（8080）
module.exports = app.listen(port, function(err) {if (err) {console.log(err)return}  // 应用的地址信息，例如：http://localhost:8080var uri = 'http://localhost:' + portconsole.log('Listening at ' + uri + '\n')// 如果符合自动打开浏览器的条件，则通过opn插件调用系统默认浏览器打开对应的地址uri// when env is testing, don't need open itif (process.env.NODE_ENV !== 'testing') {opn(uri)}
})

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')// 给出正确的绝对路径var env = process.env.NODE_ENV// check env & config/index.js to decide weither to enable CSS Sourcemaps for the// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProdmodule.exports = {entry: {// 配置webpack编译入口app: './src/main.js'},output: {// 配置webpack输出路径和命名规则path: config.build.assetsRoot,// webpack输出的目标文件夹路径（例如：/dist）publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,// webpack编译输出的发布路径filename: '[name].js'  // webpack输出bundle文件命名格式},resolve: {// 配置模块resolve的规则extensions: ['', '.js', '.vue'],// 自动resolve的扩展名fallback: [path.join(__dirname, '../node_modules')],alias: {// 创建路径别名，有了别名之后引用模块更方便，例如 // import Vue from 'vue/dist/vue.common.js'可以写成 import Vue from 'vue''vue$': 'vue/dist/vue.common.js','src': path.resolve(__dirname, '../src'),'assets': path.resolve(__dirname, '../src/assets'),'components': path.resolve(__dirname, '../src/components'),'common': path.resolve(__dirname, '../src/common'),'img': path.resolve(__dirname, '../resource/img')}},resolveLoader: {fallback: [path.join(__dirname, '../node_modules')]},module: {// 配置不同类型模块的处理规则preLoaders: [{test: /\.vue$/,loader: 'eslint',include: projectRoot,exclude: /node_modules/}, {test: /\.js$/,// 对所有.vue文件使用eslintloader: 'eslint',include: projectRoot,exclude: /node_modules/}],loaders: [{test: /\.vue$/,loader: 'vue'}, {test: /\.js$/,// 对src和test文件夹下的.js文件使用babel-loaderloader: 'babel',include: projectRoot,exclude: /node_modules/}, {test: /\.json$/,loader: 'json'}, {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url',query: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}}, {// 对字体资源文件使用url，query.name指明了输出的命名规则test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url',query: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]},eslint: {formatter: require('eslint-friendly-formatter')},vue: {loaders: utils.cssLoaders({sourceMap: useCssSourceMap}),postcss: [require('autoprefixer')({browsers: ['last 2 versions']})]}
}

var config = require('../config')
var webpack = require('webpack')// 一个可以合并数组和对象的插件
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var HtmlWebpackPlugin = require('html-webpack-plugin')// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
// 合并基础的webpack配置
module.exports = merge(baseWebpackConfig, {// 配置样式文件的处理规则，使用styleLoadersmodule: {loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })},// eval-source-map is faster for development// 配置Source Mapsdevtool: '#eval-source-map',plugins: [// 配置webpack插件new webpack.DefinePlugin({'process.env': config.dev.env}),// https://github.com/glenjamin/webpack-hot-middleware#installation--usagenew webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true})]
})

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')// 用于从webpack生成的bundle中提取文本到特定文件中的插件 // 可以抽取出css，js文件将其与webpack输出的bundle分离
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = config.build.envvar webpackConfig = merge(baseWebpackConfig, {// 合并基础的webpack配置module: {loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })},devtool: config.build.productionSourceMap ? '#source-map' : false,output: {// 配置webpack的输出path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},vue: {loaders: utils.cssLoaders({sourceMap: config.build.productionSourceMap,extract: true})},plugins: [// http://vuejs.github.io/vue-loader/en/workflow/production.htmlnew webpack.DefinePlugin({// 抽离css文件'process.env': env}),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),new webpack.optimize.OccurrenceOrderPlugin(),// extract css into its own filenew ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),// generate dist index.html with correct asset hash for caching.// you can customize output by editing /index.html// see https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference
      },// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency'}),// split vendor js into its own filenew webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}}),// extract webpack runtime and module manifest to its own file in order to// prevent vendor hash from being updated whenever app bundle is updatednew webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']})]
})if (config.build.productionGzip) {var CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}module.exports = webpackConfig