webpack.dev.conf.js 2.9 KB

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