webpack.dev.conf.js 3.0 KB

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