webpack.dev.conf.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. 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. // https://github.com/ampedandwired/html-webpack-plugin
  51. new HtmlWebpackPlugin({
  52. filename: 'index.html',
  53. template: 'index.html',
  54. inject: true,
  55. favicon: resolve('favicon.ico'),
  56. title: '在线考试系统管理员端'
  57. })
  58. ]
  59. })
  60. module.exports = new Promise((resolve, reject) => {
  61. portfinder.basePort = process.env.PORT || config.dev.port
  62. portfinder.getPort((err, port) => {
  63. if (err) {
  64. reject(err)
  65. } else {
  66. // publish the new Port, necessary for e2e tests
  67. process.env.PORT = port
  68. // add port to devServer config
  69. devWebpackConfig.devServer.port = port
  70. // Add FriendlyErrorsPlugin
  71. devWebpackConfig.plugins.push(
  72. new FriendlyErrorsPlugin({
  73. compilationSuccessInfo: {
  74. messages: [
  75. `Your application is running here: http://${
  76. devWebpackConfig.devServer.host
  77. }:${port}`
  78. ]
  79. },
  80. onErrors: config.dev.notifyOnErrors
  81. ? utils.createNotifierCallback()
  82. : undefined
  83. })
  84. )
  85. resolve(devWebpackConfig)
  86. }
  87. })
  88. })