npm run compile

  "scripts": {
    "compile": "cross-env SERVER_ENV=test node build/dev-server.js",
  },

//這個(gè)會(huì)打印test，上面配置的環(huán)境變量
console.log("env1",process.env.SERVER_ENV)
//這個(gè)會(huì)打印prod，因?yàn)闆]有配置ENV1
console.log("env2",`"${process.env.SERVER_ENV1 || 'prod'}"`)
//這個(gè)會(huì)打印test，上面配置的環(huán)境變量
console.log("env3",`"${process.env.SERVER_ENV || 'prod'}"`)

const config = require('../config')
//這個(gè)打印內(nèi)容
console.log("config",config)

//這個(gè)是讀取node_modules的path依賴，解析路徑用的（類似jar包）
const path = require('path')

//這個(gè)是讀取同級(jí)目錄下的test.js文件
const testEnv = require('./test')

module.exports = {
  test: {
    env: testEnv,
    port: 10001,
    assetsSubDirectory: 'static',
    assetsPublicPath: process.env.SERVER_ENV === 'test' ? '/sub-path-test/' : '/sub-path/',
    proxyTable: {
      api: {
        filter: '/sub-path-test/**',
        changeOrigin: true,
        target,
        onProxyReq(proxyReq) {
          proxyReq.setHeader(
            'Cookie', `SESSION=6b7c231d-1133-40cf-c566-332f6dtxfa72`
          )
        },
      },
    },
  },
}

//這個(gè)也是node_modules里的依賴方法，用來合并成json用
const merge = require('webpack-merge');

//這個(gè)讀取的是同級(jí)目錄下的prod.js文件
const prodEnv = require('./prod');

//這個(gè)把json合并了下，然后exports了
module.exports = merge(prodEnv, {
  TEST_ENV: '"test_env"',
});

module.exports = {
  PROD_ENV: '"prod_env"',
};

config {
  test: {
    env: { TEST_ENV: '"test_env"', PROD_ENV: '"prod_env"' },
    port: 10001,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/sub-path-test/',
    proxyTable: { api: [Object] }
  }
}

//node_modules里的依賴，框架方法
const express = require('express')
//執(zhí)行這個(gè)方法，獲得返回值
const app = express()

//node_modules里的依賴，解析路徑用
const path = require('path')
//從config對(duì)象（json）里獲取到子路徑相關(guān)
//posix是一種平臺(tái)兼容寫法，與join相同，也是把路徑拼接起來
//staticPath="/sub-path-test/static"
const staticPath = path.posix.join(
  config.test.assetsPublicPath,
  config.test.assetsSubDirectory
)
//配置虛擬子路徑、以及靜態(tài)資源目錄
//意思是，訪問/sub-path-test/static時(shí)，訪問的類似是當(dāng)前目錄(一般是dist目錄)下的static文件夾中的內(nèi)容
//例如，http://localhost:10001/sub-path-test/static/a.png，訪問的就是static文件夾里的a.png
app.use(staticPath, express.static('./static'))

//啟動(dòng)項(xiàng)目，設(shè)置啟動(dòng)后的端口，10001
const port = config.test.port
module.exports = app.listen(port, err => {
  if (err) {
    console.log(err)
  }
})

//node_modules依賴方法
const webpack = require('webpack')
//自己配置的一個(gè)js文件
const webpackConfig = require('./webpack.dev.conf')
//調(diào)用了下webpack方法
const compiler = webpack(webpackConfig)
//獲得了個(gè)變量devMiddleware
const devMiddleware = require('webpack-dev-middleware')(compiler, {
  //總之，這個(gè)的值也是 config.test.assetsPublicPath，就是"/sub-path-test/"
  publicPath: webpackConfig.output.publicPath,
  noInfo: false,
  quiet: false,
  stats: {
    colors: true,
  },
})

//給app設(shè)置了下
app.use(devMiddleware)