build 文件夾中的 webpack.dev.conf.js

 

//此文件是開發環境下webpack相關配置
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge') //導入webpackage-merge 用來合並對象 去掉重復的屬性
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin') //導入copy-webpack-plugin 用來復制
const HtmlWebpackPlugin = require('html-webpack-plugin') //導入html-webpack-plugin 用來自動生成html
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') //導入friendily-errors-webpack-plugin 用來收集和展示錯誤日志
const portfinder = require('portfinder') //導入portfinder 用來獲取port

// 主機
const HOST = process.env.HOST

// 端口
const PORT = process.env.PORT && Number(process.env.PORT)

// 合並
const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  module: {

    //解析樣式文件的規則 
    rules: utils.styleLoaders({
      sourceMap: config.dev.cssSourceMap,
      usePostCSS: true
    })
  },

  // cheap-module-eval-source-map is faster for development
  // 開發工具 用來調試
  devtool: config.dev.devtool,


  // 服務器 如需要請求本地數據時  需要在此塊添加其他配置
  // 這些 devServer 選項應該在 /config/index.js 中定制
  devServer: {

    //重新加載server,控制台以warning方式提示錯誤
    clientLogLevel: 'warning',


    //HTML5 history api時,任意的404可能需要被替代為index.html
    historyApiFallback: {
      rewrites: [{
        from: /.*/,
        to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
      }, ],
    },
    hot: true, //啟用熱替換

    contentBase: false, // 告訴服務器從哪里提供內容，只有在你想要提供靜態文件時才需要，這里是禁用 ( since we use CopyWebpackPlugin. )

    compress: true, //是否壓縮
    host: HOST || config.dev.host, //主機
    port: PORT || config.dev.port, //端口
    open: config.dev.autoOpenBrowser, //是否自動打開瀏覽器

    // 編譯出錯時是否有提示
    overlay: config.dev.errorOverlay ? {
      warnings: false,
      errors: true
    } : false,

    publicPath: config.dev.assetsPublicPath, //靜態資源路徑 此路徑可在瀏覽器中打開
    proxy: config.dev.proxyTable, //代理
    quiet: true, // 啟用quiet 意思是除了啟動信息以外的任何信息都不會打印在控制台 （necessary for FriendlyErrorsPlugin）

    // 監視文件的選項
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    // 自定義一個plugin 生成當前環境的一個變量
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(), //模塊熱替換插件 修改模塊時不需要刷新頁面

    // https://github.com/ampedandwired/html-webpack-plugin
    // 這是一個webpack插件，可以簡化HTML文件的創建，從而為您的webpack bundle提供服務。這對於webpack bundle特別有用，因為它在文件名中包含一個哈希值，這會改變每次編譯。你可以讓插件為你生成一個HTML文件，使用lodash模板提供你自己的模板，或者使用你自己的加載器。
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: path.resolve(__dirname, '../static/images/favicon.ico'),
      inject: true,
      dll: (function () {
        let max = 2
        let res = []
        for (let i = 0; i < max; i++) {
          const dllName = require(path.resolve(__dirname, `../dllManifest/xuAdmin${i}-manifest.json`)).name.split('_')
          res.push(`/static/dll/${dllName[0]}.${dllName[1]}.dll.js`)
        }
        return res
      })()
    }),
    // 復制靜態資源到開發環境的路徑
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.dev.assetsSubDirectory,
      ignore: ['.*']
    }])
  ]
})

// 導出
module.exports = new Promise((resolve, reject) => {
  // 獲取basePort
  portfinder.basePort = process.env.PORT || config.dev.port
  // 端口配置
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      process.env.PORT = port // 發布 e2e 測試所需的新端口
      devWebpackConfig.devServer.port = port // 添加端口到 devServer 配置

      // 添加友好提示(Add FriendlyErrorsPlugin)
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        // 編譯成功提示
        compilationSuccessInfo: {
          // 提示運行的組機和端口
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
          // 備注
          notes: [`   _     _       _     _       _     _        _     _      _     _     
                     (c).-.(c)     (c).-.(c)     (c).-.(c)     (c).-.(c)     (c).-.(c)    
                      / ._. \\      / ._. \\      / ._. \\      / ._. \\      / ._. \\   
                   __\\( Z )/__  __\\( Y )/__  __\\( J )/__  __\\( B )/__  __\\( X )/__  
                   (_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)
                     || L ||       || O ||        || V ||        || E ||       || . ||      
                 _.' \`-' '._  _.' \`-' '._  _.' \`-' '._  _.' \`-' '._  _.' \`-' '._  _.' 
                (.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)
                \`-'     \`-'  \`-'     \`-'  \`-'     \`-'  \`-'     \`-'  \`-'     \`-'  `]
        },
        // 錯誤提示
        onErrors: config.dev.notifyOnErrors ?
          utils.createNotifierCallback() : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})