webpack.dev.conf.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. var utils = require('./utils')
  2. var webpack = require('webpack')
  3. var config = require('../config')
  4. var merge = require('webpack-merge')
  5. var baseWebpackConfig = require('./webpack.base.conf')
  6. // var HtmlWebpackPlugin = require('html-webpack-plugin')
  7. var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
  8. // copy from ./webpack.prod.conf.js
  9. var path = require('path')
  10. var ExtractTextPlugin = require('extract-text-webpack-plugin')
  11. var CopyWebpackPlugin = require('copy-webpack-plugin')
  12. var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  13. // add hot-reload related code to entry chunks
  14. // Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  15. // baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
  16. // })
  17. module.exports = merge(baseWebpackConfig, {
  18. module: {
  19. rules: utils.styleLoaders({
  20. sourceMap: config.dev.cssSourceMap,
  21. extract: true
  22. })
  23. },
  24. // cheap-module-eval-source-map is faster for development
  25. // devtool: '#cheap-module-eval-source-map',
  26. devtool: '#source-map',
  27. output: {
  28. path: config.build.assetsRoot,
  29. // filename: utils.assetsPath('[name].[chunkhash].js'),
  30. // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
  31. filename: utils.assetsPath('[name].js'),
  32. chunkFilename: utils.assetsPath('[id].js')
  33. },
  34. plugins: [
  35. new webpack.DefinePlugin({
  36. 'process.env': config.dev.env
  37. }),
  38. // copy from ./webpack.prod.conf.js
  39. // extract css into its own file
  40. new ExtractTextPlugin({
  41. // filename: utils.assetsPath('[name].[contenthash].css')
  42. filename: utils.assetsPath(`[name].${config.dev.fileExt.style}`)
  43. }),
  44. // Compress extracted CSS. We are using this plugin so that possible
  45. // duplicated CSS from different components can be deduped.
  46. new OptimizeCSSPlugin({
  47. cssProcessorOptions: {
  48. safe: true
  49. }
  50. }),
  51. new webpack.optimize.CommonsChunkPlugin({
  52. name: 'common/vendor',
  53. minChunks: function (module, count) {
  54. // any required modules inside node_modules are extracted to vendor
  55. return (
  56. module.resource &&
  57. /\.js$/.test(module.resource) &&
  58. module.resource.indexOf('node_modules') >= 0
  59. ) || count > 1
  60. }
  61. }),
  62. new webpack.optimize.CommonsChunkPlugin({
  63. name: 'common/manifest',
  64. chunks: ['common/vendor']
  65. }),
  66. // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
  67. // new webpack.HotModuleReplacementPlugin(),
  68. new webpack.NoEmitOnErrorsPlugin(),
  69. // https://github.com/ampedandwired/html-webpack-plugin
  70. // new HtmlWebpackPlugin({
  71. // filename: 'index.html',
  72. // template: 'index.html',
  73. // inject: true
  74. // }),
  75. new FriendlyErrorsPlugin()
  76. ]
  77. })