webpack 配置

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

build/dev-server.js

var webpackConfig = require('./webpack.dev.conf') // 使用 dev 環(huán)境的 webpack 配置
var compiler = webpack(webpackConfig) // 啟動 webpack 進(jìn)行編譯
/* 啟動 webpack-dev-middleware，將 編譯后的文件暫存到內(nèi)存中 */
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
})

build/build.js

var webpackConfig = require('./webpack.prod.conf') // 加載 webpack.prod.conf
webpack(webpackConfig, function (err, stats) {
  // 編譯成功的回調(diào)函數(shù)
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n')
})

build/webpack.dev.conf.js

var baseWebpackConfig = require('./webpack.base.conf') // 加載 webpack.base.conf
module.exports = merge(baseWebpackConfig, {
  module: {
    // 使用 styleLoaders
    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  ...
})

build/webpack.base.conf.js

var config = require('../config') // 引入 config/index.js

/* 是否在 dev 環(huán)境下開啟 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
/* 是否在 production 環(huán)境下開啟 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
module.exports = {
  entry: {
    app: './src/main.js' // 編譯文件入口
  },
  output: {
    path: config.build.assetsRoot, // 編譯輸出的靜態(tài)資源根路徑
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // 正式發(fā)布環(huán)境下編譯輸出的上線路徑的根路徑
    filename: '[name].js' // 編譯輸出的文件名
  },
  ...
})

onfig/index.js

var path = require('path')
module.exports = {
  build: { // production 環(huán)境
    env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環(huán)境
    index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態(tài)資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
    productionSourceMap: true, // 是否開啟 cssSourceMap
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false, // 是否開啟 gzip
    productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 壓縮的文件擴(kuò)展名
  },
  dev: { // dev 環(huán)境
    env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環(huán)境
    port: 8080, // 運(yùn)行測試頁面的端口
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發(fā)布的根目錄，可配置為資源服務(wù)器域名或 CDN 域名
    proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）
    cssSourceMap: false // 是否開啟 cssSourceMap(因為一些 bug 此選項默認(rèn)關(guān)閉，詳情可參考 https://github.com/webpack/css-loader#sourcemaps)
  }
}