vue-cli腳手架之webpack.dev.conf.js

webpack.dev.conf.js  開發環境模式配置文件：

 

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

 

 

額，看到一個大佬說，要想自己真正弄懂，就最好自己實現一個vue-cli......我的下巴掉了！