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