webpack.dev.conf.js 3.0 KB

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