vue - webpack.dev.conf.js

描述：开发时的配置.(配置开发时的一些操作)

例如这里，是否自动打开浏览器（默认true）

 'use strict'

 // build/util.js
 const utils = require('./utils')
 // node_modules里面的webpack
 const webpack = require('webpack')
 // config/index.js
 const config = require('../config')
 // 对象合并
 const merge = require('webpack-merge')
 // 路径
 const path = require('path')

 // 引入webpack.base.conf.js配置
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')

 // 配置
 const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)

 const devWebpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   },
   // cheap-module-eval-source-map开发速度更快(只检测修改了的文件进行更新，而不是全部)
   devtool: config.dev.devtool,

   /**
    *  这里配置开发服务器
    */
   devServer: {
     clientLogLevel: 'warning',
     historyApiFallback: {
       rewrites: [
         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
       ],
     },
     // 是否开启HMR
     hot: true,
     // 内容
     contentBase: false, // 因为我们使用CopyWebpackPlugin
     // 是否压缩
     compress: true,

     host: HOST || config.dev.host,
     port: PORT || config.dev.port,

     // config => config/index.js
     open: config.dev.autoOpenBrowser,

     overlay: config.dev.errorOverlay
       ? { warnings: false, errors: true }
       : false,
     publicPath: config.dev.assetsPublicPath,
     proxy: config.dev.proxyTable,
     // 如果不开启，则不提示友好的错误信息！
     quiet: true, // FriendlyErrorsPlugin所必需的
     watchOptions: {
       poll: config.dev.poll,
     }
   },

   /**
    * 配置插件
    */
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin(), // HMR在更新时在控制台中显示正确的文件名。
     new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true
     }),
     // 复制到自定义静态源
     new CopyWebpackPlugin([
       {
         // 来自(可以是对象，可以是String)
         from: path.resolve(__dirname, '../static'),
         // 走向(可以是对象，可以是String)
         to: config.dev.assetsSubDirectory,
         // 忽略此类文件
         ignore: ['.*']
       }
     ])
   ]
 })

 /**
  * 模块导出(Promise)
  */
 module.exports = new Promise((resolve, reject) => {
   portfinder.basePort = process.env.PORT || config.dev.port
   portfinder.getPort((err, port) => {

     if (err) {
       reject(err)
     } else {
       // 发布新的端口，这是e2e测试所必需的
       process.env.PORT = port
       // 添加开发服务器到端口地址
       devWebpackConfig.devServer.port = port

       // 添加 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)
     }
   })
 })