webpack.dev.conf.js 3.1 KB

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