const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')

//一個負責拷貝資源的外掛
const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin 
 
= require('html-webpack-plugin')

//一個更友好的展示webpack錯誤提示的外掛
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

//一個自動檢索埠的包
const portfinder = require('portfinder')

const HOST = process.env.HOSTconst PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig 
 
= merge(baseWebpackConfig, {  
    module: {    
        rules: utils.styleLoaders({ 
            sourceMap: config.dev.cssSourceMap,
            usePostCSS: true 
        })  
    },  
    
    devtool: config.dev.devtool,
    // devServer的配置大家看文件就好了 
    devServer: {    
        clientLogLevel: 'warning',    
        historyApiFallback: {      
            rewrites: [        
                { from: 
 
/.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },      
            ],    
        },    
        hot: true,    
        contentBase: false,   
        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,    
        watchOptions: {      
            poll: config.dev.poll,    
        }  
    },  
    plugins: [
    
        //還記得之前說的生產環境和開發環境的變數在哪兒定義的嗎？對，就是這裡    
        new webpack.DefinePlugin({      
            process.env: require('../config/dev.env')    
        }),

        //模組熱替換的外掛，修改模組不需要重新整理頁面    
        new webpack.HotModuleReplacementPlugin(),

        //當使用HotModuleReplacementPlugin時，這個外掛會顯示模組正確的相對路徑    
        new webpack.NamedModulesPlugin(),

        //在編譯出錯時，使用NoEmitOnErrorsPlugin來跳過輸出階段，這樣可以確保輸出資源不會包含錯誤
        new webpack.NoEmitOnErrorsPlugin(),   
        new HtmlWebpackPlugin({      
            filename: 'index.html',      
            template: 'index.html',      
            inject: true    
        }),    

        // 將static資料夾和裡面的內容拷貝到開發模式下的路徑,比如static下有個img資料夾，裡面有張圖片
        // 我們可以這樣訪問：localhost:8080/static/img/logo.png    
        new CopyWebpackPlugin([     
            {        
                from: path.resolve(__dirname, '../static'),        
                to: config.dev.assetsSubDirectory,        
                ignore: ['.*']      
            }    
        ])  
    ]
})

//這裡主要是做埠的檢索以及npm run dev後對錯誤的處理，我們可以看這裡使用了前面引入的
//'friendly-errors-webpack-plugin'外掛
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: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})