const path = require('path')
const merge = require('webpack-merge')// merge 将webpack 公共文件meige 到指定的配置中
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 1、为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题 2、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
const commonConfig = require('./webpack.common.config.js')
const config = require('../config')
const utils = require('./utils')
const portfinder = require('portfinder')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const configuration = merge(commonConfig, {
  mode: 'development', // 
  devtool: 'inline-source-map',
  entry: {
    app: './examples/main',
    vendors: ['vue', 'vue-router']
  },
  output: {
    path: path.join(__dirname, '../examples/dist'),
    publicPath: config.build.assetsPublicPath,
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  },
  devServer: {
    host: config.dev.host,
    port: config.dev.port,
    compress: true,// 一切服务都启用gzip 压缩：
    open: true, // 启动后自动打开浏览器
    hot: true, //启用 webpack 的模块热替换特性：
    clientLogLevel: 'warning',
    overlay: config.dev.errorOverlay //当出现编译器错误或警告时，在浏览器中显示全屏覆盖。默认情况下禁用。如果您只想显示编译器错误
      ? { warnings: false, errors: true }
      : false,
    publicPath: '/',// 此路径下的打包文件可以在浏览器中访问，假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。
    quiet: true, //启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见
    progress: true, // 运行进度输出到控制台
    watchOptions: { // 与监视文件相关的控制选项。 一般false
      poll: config.dev.poll,
    }
  },
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.dev.cssSourceMap,
      usePostCSS: true
    })
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      // 输出的html的文件名称
      filename: 'index.html',
      // html模板所在的文件路径
      //根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader， 否则webpack不能正确解析。如果你设置的 title 和 filename于模板中发生了冲突，那么以你的title 和 filename 的配置值为准。
      template: path.join(__dirname, '../examples/index.html'),
      // 注入选项。有四个选项值 true, body, head, false.
      // true：默认值，script标签位于html文件的 body 底部
      // body：script标签位于html文件的 body 底部（同 true）
      // head：script 标签位于 head 标签内
      // false：不插入生成的 js 文件，只是单纯的生成一个 html 文件
      inject: true
    })
  ]
})

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
      configuration.devServer.port = port

      // Add FriendlyErrorsPlugin
      configuration.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${configuration.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(configuration)
    }
  })
})