webpack.config.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * React Static Boilerplate
  3. * Copyright (c) Konstantin Tarkus | MIT License
  4. */
  5. import path from 'path';
  6. import minimist from 'minimist';
  7. import webpack from 'webpack';
  8. import gutil from 'gulp-util';
  9. import autoprefixer from 'autoprefixer-core';
  10. import merge from 'lodash/object/merge';
  11. const argv = minimist(process.argv.slice(2));
  12. const DEBUG = !argv.release;
  13. const VERBOSE = !!argv.verbose;
  14. const JSX_LOADER = DEBUG ? 'react-hot!babel' : 'babel';
  15. const AUTOPREFIXER_BROWSERS = [
  16. 'Android 2.3',
  17. 'Android >= 4',
  18. 'Chrome >= 20',
  19. 'Firefox >= 24',
  20. 'Explorer >= 8',
  21. 'iOS >= 6',
  22. 'Opera >= 12',
  23. 'Safari >= 6'
  24. ];
  25. // Base configuration
  26. const config = {
  27. entry: DEBUG ? [
  28. 'webpack-dev-server/client?http://localhost:3000',
  29. 'webpack/hot/only-dev-server'
  30. ] : [],
  31. output: {
  32. path: path.join(__dirname, 'build'),
  33. publicPath: './',
  34. sourcePrefix: ' '
  35. },
  36. cache: false,
  37. debug: DEBUG,
  38. stats: {
  39. colors: gutil.colors.supportsColor,
  40. reasons: DEBUG,
  41. hash: VERBOSE,
  42. version: VERBOSE,
  43. timings: VERBOSE,
  44. chunks: VERBOSE,
  45. chunkModules: VERBOSE,
  46. cached: VERBOSE,
  47. cachedAssets: VERBOSE
  48. },
  49. plugins: [
  50. new webpack.optimize.OccurenceOrderPlugin(),
  51. new webpack.DefinePlugin({
  52. 'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  53. '__DEV__': DEBUG
  54. }),
  55. DEBUG && new webpack.HotModuleReplacementPlugin(),
  56. DEBUG && new webpack.NoErrorsPlugin()
  57. ],
  58. module: {
  59. loaders: [{
  60. test: /\.css$/,
  61. loader: 'style-loader/useable!' +
  62. 'css-loader' + (DEBUG ? '/minimize' : '') + '!postcss-loader'
  63. }, {
  64. test: /\.jsx?$/,
  65. exclude: /node_modules/,
  66. loader: JSX_LOADER
  67. }, {
  68. test: /routes\.jsx?$/,
  69. loader: './routes-loader.js'
  70. }, {
  71. test: /\.gif/,
  72. loader: 'url-loader?limit=10000&mimetype=image/gif'
  73. }, {
  74. test: /\.jpg/,
  75. loader: 'url-loader?limit=10000&mimetype=image/jpg'
  76. }, {
  77. test: /\.png/,
  78. loader: 'url-loader?limit=10000&mimetype=image/png'
  79. }, {
  80. test: /\.svg/,
  81. loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  82. }]
  83. },
  84. postcss: [autoprefixer(AUTOPREFIXER_BROWSERS)]
  85. };
  86. // Configuration for the client-side bundle
  87. const appConfig = merge({}, config, {
  88. entry: config.entry.concat([
  89. './scripts/app.js'
  90. ]),
  91. output: {
  92. filename: 'app.js'
  93. }
  94. });
  95. // Configuration for server-side pre-rendering bundle
  96. const pagesConfig = merge({}, config, {
  97. entry: './scripts/pages.js',
  98. output: {
  99. filename: 'pages.js',
  100. libraryTarget: 'commonjs2'
  101. },
  102. target: 'node',
  103. externals: /^[a-z][a-z\.\-0-9]*$/,
  104. node: {
  105. console: false,
  106. global: false,
  107. process: false,
  108. Buffer: false,
  109. __filename: false,
  110. __dirname: false
  111. }
  112. });
  113. export default [appConfig, pagesConfig];