webpack.dev.conf.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. 'use strict'
  2. const utils = require('./utils')
  3. const webpack = require('webpack')
  4. const config = require('../config')
  5. const merge = require('webpack-merge')
  6. const baseWebpackConfig = require('./webpack.base.conf')
  7. const HtmlWebpackPlugin = require('html-webpack-plugin')
  8. const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
  9. const portfinder = require('portfinder')
  10. const HOST = process.env.HOST
  11. const PORT = process.env.PORT && Number(process.env.PORT)
  12. const devWebpackConfig = merge(baseWebpackConfig, {
  13. module: {
  14. rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  15. },
  16. // cheap-module-eval-source-map is faster for development
  17. devtool: config.dev.devtool,
  18. // these devServer options should be customized in /config/index.js
  19. devServer: {
  20. clientLogLevel: 'warning',
  21. historyApiFallback: true,
  22. hot: true,
  23. compress: true,
  24. host: HOST || config.dev.host,
  25. port: PORT || config.dev.port,
  26. open: config.dev.autoOpenBrowser,
  27. overlay: config.dev.errorOverlay
  28. ? { warnings: false, errors: true }
  29. : false,
  30. publicPath: config.dev.assetsPublicPath,
  31. proxy: config.dev.proxyTable,
  32. quiet: true, // necessary for FriendlyErrorsPlugin
  33. watchOptions: {
  34. poll: config.dev.poll
  35. }
  36. },
  37. plugins: [
  38. new webpack.DefinePlugin({
  39. 'process.env': require('../config/dev.env')
  40. }),
  41. new webpack.HotModuleReplacementPlugin(),
  42. new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  43. new webpack.NoEmitOnErrorsPlugin(),
  44. // https://github.com/ampedandwired/html-webpack-plugin
  45. new HtmlWebpackPlugin({
  46. filename: 'index.html',
  47. template: 'index.html',
  48. inject: true
  49. })
  50. ]
  51. })
  52. module.exports = new Promise((resolve, reject) => {
  53. portfinder.basePort = process.env.PORT || config.dev.port
  54. portfinder.getPort((err, port) => {
  55. if (err) {
  56. reject(err)
  57. } else {
  58. // publish the new Port, necessary for e2e tests
  59. process.env.PORT = port
  60. // add port to devServer config
  61. devWebpackConfig.devServer.port = port
  62. // Add FriendlyErrorsPlugin
  63. devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  64. compilationSuccessInfo: {
  65. messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
  66. },
  67. onErrors: config.dev.notifyOnErrors
  68. ? utils.createNotifierCallback()
  69. : undefined
  70. }))
  71. resolve(devWebpackConfig)
  72. }
  73. })
  74. })