webpack.dev.conf.js 開發環境模式配置檔案：

// An highlighted block
'use strict'//js按照嚴格模式執行
const utils = require('./utils')//匯入utils.js
const webpack = require('webpack')//使用webpack來使用webpack內建外掛
const config = require('../config')//config資料夾下index.js檔案
const merge = require('webpack-merge')//引入webpack-merge外掛用來合併webpack配置物件，也就是說可以把webpack配置檔案拆分成幾個小的模組，然後合併
 

const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')//匯入webpack基本配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')//生成html檔案
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder =
 
 require('portfinder')//獲取port

const HOST = process.env.HOST//process.env屬性返回一個物件，包含了當前shell的所有環境變數。這句取其中的host檔案？
const PORT = process.env.PORT && Number(process.env.PORT)//獲取所有環境變數下的埠？

//合併模組，第一個引數是webpack基本配置檔案webpack.base.conf.js中的配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module:
 
 {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })//建立模組時匹配請求的規則陣列,這裡呼叫了utils中的配置模板styleLoaders
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,//debtool是開發工具選項，用來指定如何生成sourcemap檔案，cheap-module-eval-source-map此款soucemap檔案價效比最高

  // these devServer options should be customized in /config/index.js
  devServer: {//webpack伺服器配置
    clientLogLevel: 'warning',//使用內聯模式時，在開發工具的控制檯將顯示訊息，可取的值有none error warning info
    historyApiFallback: {//當使用h5 history api時，任意的404響應都可能需要被替代為index.html，通過historyApiFallback：true控制；通過傳入一個物件，比如使用rewrites這個選項進一步控制
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,//是否啟用webpack的模組熱替換特性。這個功能主要是用於開發過程中，對生產環境無幫助。效果上就是介面無重新整理更新。
    contentBase: false, // since we use CopyWebpackPlugin.這裡禁用了該功能。本來是告訴伺服器從哪裡提供內容，一半是本地靜態資源。
    compress: true,//一切服務是否都啟用gzip壓縮
    host: HOST || config.dev.host,//指定一個host,預設是localhost。如果有全域性host就用全域性，否則就用index.js中的設定。
    port: PORT || config.dev.port,//指定埠
    open: config.dev.autoOpenBrowser,//是否在瀏覽器開啟本dev server
    overlay: config.dev.errorOverlay//當有編譯器錯誤時，是否在瀏覽器中顯示全屏覆蓋。
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,//此路徑下的打包檔案可在瀏覽器中訪問
    proxy: config.dev.proxyTable,//如果你有單獨的後端開發伺服器api,並且希望在同域名下發送api請求，那麼代理某些URL會很有用。
    quiet: true, // necessary for FriendlyErrorsPlugin  啟用 quiet 後，除了初始啟動資訊之外的任何內容都不會被列印到控制檯。這也意味著來自 webpack 的錯誤或警告在控制檯不可見。
    watchOptions: {//webpack 使用檔案系統(file system)獲取檔案改動的通知。在某些情況下，不會正常工作。例如，當使用 Network File System (NFS) 時。Vagrant 也有很多問題。在這些情況下使用輪詢。
      poll: config.dev.poll,//是否使用輪詢
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({//模組HtmlWebpackPlugin
      filename: 'index.html',//生成的檔案的名稱
      template: 'index.html',//可以指定模組html檔案
      inject: true//在文件上沒查到這個選項 不知道幹嘛的。。。
    }),
    // copy custom static assets
    new CopyWebpackPlugin([//模組CopyWebpackPlugin  將單個檔案或整個檔案複製到構建目錄
      {
        from: path.resolve(__dirname, '../static'),//將static資料夾及其子檔案複製到
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']//這個沒翻譯好，百度翻譯看不懂，請自己查文件。。。
      }
    ])
  ]
})
//webpack將執行由配置檔案匯出的函式，並且等待promise返回，便於需要非同步地載入所需的配置變數。
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({//出錯友好處理外掛
        compilationSuccessInfo: {//build成功的話會執行者塊
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors//如果出錯就執行這塊,其實是utils裡面配置好的提示資訊
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

參考 https://www.cnblogs.com/hongdiandian/p/8319506.html