vue与webpack配置

1Vue-webpack项目配置详解

├── build --------------------------------- webpack相关配置文件
│   ├── build.js --------------------------webpack打包配置文件
│   ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│   ├── dev-client.js ---------------------------------- 设置环境
│   ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
│   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│   ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│   ├── webpack.base.conf.js --------------------------- webpack基本配置
│   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置文件
├── node_modules ---------------------------- 存放依赖的目录
├── src ------------------------------------- 源码
│   ├── assets ------------------------------ 静态文件
│   ├── components -------------------------- 组件 
│   ├── main.js ----------------------------- 主js
│   ├── App.vue ----------------------------- 项目入口组件
│   ├── router ------------------------------ 路由
├── package.json ---------------------------- node配置文件
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 编辑器配置
├── .gitignore------------------------------- 配置git可忽略的文件

2、接下来我们来分析各个模块的用处

先从dev-server.js开始

require('./check-versions')()   //检查node和npm的版本

/*获取config/index.js中的默认配置，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)
}

var opn = require('opn')    //一个可以强制打开浏览器并跳转到指定url的插件

var path = require('path')  //使用Node自带的文件路径工具

var express = require('express')    //使用express

var webpack = require('webpack')    //使用webpack

var proxyMiddleware = require('http-proxy-middleware')  //一个Node的代理中间件

var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')//根据不同的Node环境加载不同的webpack配置

// default port where dev server listens for incoming traffic,如果没有指定端口就是用config.dev.port作为运行端口
var port = process.env.PORT || config.dev.port

// automatically open browser, if not set will be false根据config.dev.autoOpenBrowser选择是否自动打开浏览器
var autoOpenBrowser = !!config.dev.autoOpenBrowser

// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
//使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置

var proxyTable = config.dev.proxyTable

var app = express()//使用express启动一个服务

var compiler = webpack(webpackConfig)//启动webpack进行编译

// 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

// 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload,https://www.npmjs.com/package/webpack-hot-middleware

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {},
  heartbeat: 2000
})

// 当html-webpack-plugin模板更改时，强制页面重新加载

compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// proxy api requests
//将 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))
})

// handle fallback for HTML5 history API
//使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址
// https://www.npmjs.com/package/connect-history-api-fallback

app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
//将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上

app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
//将 Hot-reload 挂在到 express 服务上

app.use(hotMiddleware)

// serve pure static assets
//拼接 static 文件夹的静态资源路径

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

app.use(staticPath, express.static('./static'))

// 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露出去

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')

  // when env is testing, don't need open it

  // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址

  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)
module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}