webpack.dev.conf.js 2.4 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 env = config.build.env
  11. const devWebpackConfig = merge(baseWebpackConfig, {
  12. module: {
  13. rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  14. },
  15. // cheap-module-eval-source-map is faster for development
  16. devtool: config.dev.devtool,
  17. // these devServer options should be customized in /config/index.js
  18. devServer: {
  19. clientLogLevel: 'warning',
  20. historyApiFallback: true,
  21. hot: true,
  22. compress: true,
  23. host: process.env.HOST || config.dev.host,
  24. port: process.env.PORT || config.dev.port,
  25. open: config.dev.autoOpenBrowser,
  26. overlay: config.dev.errorOverlay ? {
  27. warnings: false,
  28. 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': 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://${config.dev.host}:${port}`],
  66. },
  67. onErrors: config.dev.notifyOnErrors
  68. ? utils.createNotifierCallback()
  69. : undefined
  70. }))
  71. resolve(devWebpackConfig)
  72. }
  73. })
  74. })