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