webpack.dev.conf.js 2.7 KB

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. //const VueLoaderPlugin = require('vue-loader/lib/plugin');
  12. function resolve (dir) {
  13. return path.join(__dirname, '..', dir)
  14. }
  15. const HOST = process.env.HOST
  16. const PORT = process.env.PORT && Number(process.env.PORT)
  17. const devWebpackConfig = merge(baseWebpackConfig, {
  18. module: {
  19. rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  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: true,
  27. hot: true,
  28. compress: true,
  29. host: HOST || config.dev.host,
  30. port: PORT || config.dev.port,
  31. open: config.dev.autoOpenBrowser,
  32. overlay: config.dev.errorOverlay
  33. ? { warnings: false, errors: true }
  34. : false,
  35. publicPath: config.dev.assetsPublicPath,
  36. proxy: config.dev.proxyTable,
  37. quiet: true, // necessary for FriendlyErrorsPlugin
  38. watchOptions: {
  39. poll: config.dev.poll,
  40. }
  41. },
  42. plugins: [
  43. new webpack.DefinePlugin({
  44. 'process.env': require('../config/dev.env')
  45. }),
  46. new webpack.HotModuleReplacementPlugin(),
  47. new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  48. new webpack.NoEmitOnErrorsPlugin(),
  49. // https://github.com/ampedandwired/html-webpack-plugin
  50. new HtmlWebpackPlugin({
  51. filename: 'index.html',
  52. template: 'index.html',
  53. inject: true,
  54. favicon: resolve('favicon.ico'),
  55. title: 'vue-element-admin'
  56. }),
  57. //new VueLoaderPlugin()
  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(new FriendlyErrorsPlugin({
  72. compilationSuccessInfo: {
  73. messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
  74. },
  75. onErrors: config.dev.notifyOnErrors
  76. ? utils.createNotifierCallback()
  77. : undefined
  78. }))
  79. resolve(devWebpackConfig)
  80. }
  81. })
  82. })