webpack.dev.conf.js 2.7 KB

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