webpack.config.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5. const args = process.argv.slice(2)
  6. const DEBUG = !(args[0] === '--release')
  7. const VERBOSE = args[0] === '--verbose'
  8. /**
  9. * Webpack configuration (core/main.js => build/bundle.js)
  10. * http://webpack.github.io/docs/configuration.html
  11. */
  12. const config = {
  13. // The base directory
  14. context: path.resolve(__dirname, './src'),
  15. // The entry point for the bundle
  16. entry: {
  17. app: [
  18. './main.js',
  19. ],
  20. vendor: [
  21. 'es5-shim',
  22. 'es5-shim/es5-sham',
  23. 'es6-promise',
  24. 'babel-polyfill',
  25. 'fetch-detector',
  26. 'fetch-ie8',
  27. 'fetch-jsonp',
  28. 'react',
  29. 'react-dom',
  30. 'react-redux',
  31. 'react-router',
  32. 'react-router-redux',
  33. 'redux',
  34. 'redux-thunk',
  35. ],
  36. },
  37. // Options affecting the output of the compilation
  38. output: {
  39. path: path.resolve(__dirname, 'build'),
  40. publicPath: '/',
  41. filename: 'assets/[name].js',
  42. chunkFilename: 'assets/[name].js',
  43. sourcePrefix: ' ',
  44. },
  45. // Switch loaders to debug or release mode
  46. debug: DEBUG,
  47. cache: DEBUG,
  48. // Developer tool to enhance debugging, source maps
  49. // http://webpack.github.io/docs/configuration.html#devtool
  50. devtool: DEBUG ? 'source-map' : false,
  51. // What information should be printed to the console
  52. stats: {
  53. colors: true,
  54. reasons: DEBUG,
  55. hash: VERBOSE,
  56. version: VERBOSE,
  57. timings: true,
  58. chunks: VERBOSE,
  59. chunkModules: VERBOSE,
  60. cached: VERBOSE,
  61. cachedAssets: VERBOSE,
  62. children: false,
  63. },
  64. // The list of plugins for Webpack compiler
  65. plugins: [
  66. new webpack.optimize.OccurenceOrderPlugin(),
  67. new webpack.optimize.CommonsChunkPlugin({
  68. name: 'vendor',
  69. minChunks: Infinity,
  70. }),
  71. new webpack.DefinePlugin({
  72. 'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  73. __DEV__: DEBUG,
  74. __BASENAME__: JSON.stringify(process.env.BASENAME || ''),
  75. }),
  76. new ExtractTextPlugin(
  77. 'assets/styles.css',
  78. {
  79. minimize: !DEBUG,
  80. allChunks: true,
  81. }
  82. ),
  83. new HtmlWebpackPlugin({
  84. template: path.resolve(__dirname, './src/index.ejs'),
  85. filename: 'index.html',
  86. minify: !DEBUG ? {
  87. collapseWhitespace: true,
  88. } : null,
  89. hash: true,
  90. }),
  91. ],
  92. // Options affecting the normal modules
  93. module: {
  94. loaders: [
  95. {
  96. test: /\.jsx?$/,
  97. include: [
  98. path.resolve(__dirname, './src'),
  99. ],
  100. loader: 'babel-loader',
  101. query: {
  102. plugins: [],
  103. },
  104. },
  105. {
  106. test: /\.css/,
  107. loader: ExtractTextPlugin.extract(
  108. 'style-loader',
  109. 'css-loader?-autoprefixer!postcss-loader'
  110. ),
  111. },
  112. {
  113. test: /\.scss$/,
  114. loader: ExtractTextPlugin.extract(
  115. 'style-loader',
  116. 'css-loader?-autoprefixer!postcss-loader!sass-loader'
  117. ),
  118. },
  119. {
  120. test: /\.json$/,
  121. loader: 'json-loader',
  122. },
  123. {
  124. test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
  125. loader: 'url-loader',
  126. query: {
  127. name: 'assets/[path][name].[ext]',
  128. limit: 10000,
  129. },
  130. },
  131. {
  132. test: /\.(eot|ttf|wav|mp3|ogg)$/,
  133. loader: 'file-loader',
  134. query: {
  135. name: 'assets/[path][name].[ext]',
  136. },
  137. },
  138. ],
  139. },
  140. // Alias
  141. resolve: {
  142. alias: {
  143. components: path.resolve(__dirname, './src/components/'),
  144. routes: path.resolve(__dirname, './src/routes/'),
  145. services: path.resolve(__dirname, './src/services/'),
  146. store: path.resolve(__dirname, './src/store/'),
  147. },
  148. },
  149. }
  150. // Optimize the bundle in release (production) mode
  151. if (!DEBUG) {
  152. config.plugins.push(new webpack.optimize.DedupePlugin())
  153. config.plugins.push(new webpack.optimize.UglifyJsPlugin({
  154. compress: { warnings: VERBOSE, screw_ie8: false },
  155. mangle: { screw_ie8: false },
  156. output: { screw_ie8: false },
  157. }))
  158. config.plugins.push(new webpack.optimize.AggressiveMergingPlugin())
  159. config.module.loaders
  160. .find(x => x.loader === 'babel-loader').query.plugins
  161. .unshift(
  162. 'transform-react-remove-prop-types',
  163. 'transform-react-constant-elements',
  164. 'transform-react-inline-elements',
  165. 'transform-es3-modules-literals',
  166. 'transform-es3-member-expression-literals',
  167. 'transform-es3-property-literals'
  168. )
  169. }
  170. module.exports = config