1 //此文件是開發環境下webpack相關配置
  2 'use strict'
  3 const utils = require('./utils')
  4 const webpack = require('webpack')
  5 const config = require('../config')
  6 const merge = require('webpack-merge') //導入webpackage-merge 用來合并對象 去掉重復的屬性
  7 const path = require('path')
  8 const baseWebpackConfig = require('./webpack.base.conf')
  9 const CopyWebpackPlugin = require('copy-webpack-plugin') //導入copy-webpack-plugin 用來復制
 10 const HtmlWebpackPlugin = require('html-webpack-plugin') //導入html-webpack-plugin 用來自動生成html
 11 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') //導入friendily-errors-webpack-plugin 用來收集和展示錯誤日志
 12 const portfinder = require('portfinder') //導入portfinder 用來獲取port
 13 
 14 // 主機
 15 const HOST = process.env.HOST
 16 
 17 // 端口
 18 const PORT = process.env.PORT && Number(process.env.PORT)
 19 
 20 // 合并
 21 const devWebpackConfig = merge(baseWebpackConfig, {
 22   mode: 'development',
 23   module: {
 24 
 25     //解析樣式文件的規則 
 26     rules: utils.styleLoaders({
 27       sourceMap: config.dev.cssSourceMap,
 28       usePostCSS: true
 29     })
 30   },
 31 
 32   // cheap-module-eval-source-map is faster for development
 33   // 開發工具 用來調試
 34   devtool: config.dev.devtool,
 35 
 36 
 37   // 服務器 如需要請求本地數據時  需要在此塊添加其他配置
 38   // 這些 devServer 選項應該在 /config/index.js 中定制
 39   devServer: {
 40 
 41     //重新加載server,控制臺以warning方式提示錯誤
 42     clientLogLevel: 'warning',
 43 
 44 
 45     //HTML5 history api時,任意的404可能需要被替代為index.html
 46     historyApiFallback: {
 47       rewrites: [{
 48         from: /.*/,
 49         to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
 50       }, ],
 51     },
 52     hot: true, //啟用熱替換
 53 
 54     contentBase: false, // 告訴服務器從哪里提供內容，只有在你想要提供靜態文件時才需要，這里是禁用 ( since we use CopyWebpackPlugin. )
 55 
 56     compress: true, //是否壓縮
 57     host: HOST || config.dev.host, //主機
 58     port: PORT || config.dev.port, //端口
 59     open: config.dev.autoOpenBrowser, //是否自動打開瀏覽器
 60 
 61     // 編譯出錯時是否有提示
 62     overlay: config.dev.errorOverlay ? {
 63       warnings: false,
 64       errors: true
 65     } : false,
 66 
 67     publicPath: config.dev.assetsPublicPath, //靜態資源路徑 此路徑可在瀏覽器中打開
 68     proxy: config.dev.proxyTable, //代理
 69     quiet: true, // 啟用quiet 意思是除了啟動信息以外的任何信息都不會打印在控制臺 （necessary for FriendlyErrorsPlugin）
 70 
 71     // 監視文件的選項
 72     watchOptions: {
 73       poll: config.dev.poll,
 74     }
 75   },
 76   plugins: [
 77     // 自定義一個plugin 生成當前環境的一個變量
 78     new webpack.DefinePlugin({
 79       'process.env': require('../config/dev.env')
 80     }),
 81     new webpack.HotModuleReplacementPlugin(), //模塊熱替換插件 修改模塊時不需要刷新頁面
 82 
 83     // https://github.com/ampedandwired/html-webpack-plugin
 84     // 這是一個webpack插件，可以簡化HTML文件的創建，從而為您的webpack bundle提供服務。這對于webpack bundle特別有用，因為它在文件名中包含一個哈希值，這會改變每次編譯。你可以讓插件為你生成一個HTML文件，使用lodash模板提供你自己的模板，或者使用你自己的加載器。
 85     new HtmlWebpackPlugin({
 86       filename: 'index.html',
 87       template: 'index.html',
 88       favicon: path.resolve(__dirname, '../static/images/favicon.ico'),
 89       inject: true,
 90       dll: (function () {
 91         let max = 2
 92         let res = []
 93         for (let i = 0; i < max; i++) {
 94           const dllName = require(path.resolve(__dirname, `../dllManifest/xuAdmin${i}-manifest.json`)).name.split('_')
 95           res.push(`/static/dll/${dllName[0]}.${dllName[1]}.dll.js`)
 96         }
 97         return res
 98       })()
 99     }),
100     // 復制靜態資源到開發環境的路徑
101     new CopyWebpackPlugin([{
102       from: path.resolve(__dirname, '../static'),
103       to: config.dev.assetsSubDirectory,
104       ignore: ['.*']
105     }])
106   ]
107 })
108 
109 // 導出
110 module.exports = new Promise((resolve, reject) => {
111   // 獲取basePort
112   portfinder.basePort = process.env.PORT || config.dev.port
113   // 端口配置
114   portfinder.getPort((err, port) => {
115     if (err) {
116       reject(err)
117     } else {
118       process.env.PORT = port // 發布 e2e 測試所需的新端口
119       devWebpackConfig.devServer.port = port // 添加端口到 devServer 配置
120 
121       // 添加友好提示(Add FriendlyErrorsPlugin)
122       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
123         // 編譯成功提示
124         compilationSuccessInfo: {
125           // 提示運行的組機和端口
126           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
127           // 備注
128           notes: [`   _     _       _     _       _     _        _     _      _     _     
129                      (c).-.(c)     (c).-.(c)     (c).-.(c)     (c).-.(c)     (c).-.(c)    
130                       / ._. \\      / ._. \\      / ._. \\      / ._. \\      / ._. \\   
131                    __\\( Z )/__  __\\( Y )/__  __\\( J )/__  __\\( B )/__  __\\( X )/__  
132                    (_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)(_.-/'-'\\-._)
133                      || L ||       || O ||        || V ||        || E ||       || . ||      
134                  _.' \`-' '._  _.' \`-' '._  _.' \`-' '._  _.' \`-' '._  _.' \`-' '._  _.' 
135                 (.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)(.-./\`-'\\.-.)
136                 \`-'     \`-'  \`-'     \`-'  \`-'     \`-'  \`-'     \`-'  \`-'     \`-'  `]
137         },
138         // 錯誤提示
139         onErrors: config.dev.notifyOnErrors ?
140           utils.createNotifierCallback() : undefined
141       }))
142 
143       resolve(devWebpackConfig)
144     }
145   })
146 })