webpack.dev.conf.js 2.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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. 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. // these devServer options should be customized in /config/index.js
  23. devServer: {
  24. clientLogLevel: 'warning',
  25. historyApiFallback: true,
  26. hot: true,
  27. compress: true,
  28. host: HOST || config.dev.host,
  29. port: PORT || config.dev.port,
  30. open: config.dev.autoOpenBrowser,
  31. overlay: config.dev.errorOverlay
  32. ? { warnings: false, errors: true }
  33. : false,
  34. publicPath: config.dev.assetsPublicPath,
  35. proxy: config.dev.proxyTable,
  36. quiet: true, // necessary for FriendlyErrorsPlugin
  37. watchOptions: {
  38. poll: config.dev.poll,
  39. }
  40. },
  41. plugins: [
  42. new webpack.DefinePlugin({
  43. 'process.env': require('../config/dev.env')
  44. }),
  45. new webpack.HotModuleReplacementPlugin(),
  46. new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  47. new webpack.NoEmitOnErrorsPlugin(),
  48. // https://github.com/ampedandwired/html-webpack-plugin
  49. new HtmlWebpackPlugin({
  50. filename: 'index.html',
  51. template: 'index.html',
  52. inject: true,
  53. favicon: resolve('favicon.ico'),
  54. title: '血透系统',
  55. path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
  56. }),
  57. ]
  58. })
  59. module.exports = new Promise((resolve, reject) => {
  60. portfinder.basePort = process.env.PORT || config.dev.port
  61. portfinder.getPort((err, port) => {
  62. if (err) {
  63. reject(err)
  64. } else {
  65. // publish the new Port, necessary for e2e tests
  66. process.env.PORT = port
  67. // add port to devServer config
  68. devWebpackConfig.devServer.port = port
  69. // Add FriendlyErrorsPlugin
  70. devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  71. compilationSuccessInfo: {
  72. messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
  73. },
  74. onErrors: config.dev.notifyOnErrors
  75. ? utils.createNotifierCallback()
  76. : undefined
  77. }))
  78. resolve(devWebpackConfig)
  79. }
  80. })
  81. })