webpack.dev.conf.js 3.4 KB

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