/** * React Static Boilerplate * https://github.com/koistya/react-static-boilerplate * * Copyright © 2015-2016 Konstantin Tarkus (@koistya) * * This source code is licensed under the MIT license found in the * LICENSE.txt file in the root directory of this source tree. */ const path = require('path'); const webpack = require('webpack'); const extend = require('extend'); const DEBUG = !(process.argv.slice(2) == '--release'); const VERBOSE = process.argv.slice(2) == '--verbose'; const AUTOPREFIXER_BROWSERS = [ 'Android 2.3', 'Android >= 4', 'Chrome >= 35', 'Firefox >= 31', 'Explorer >= 9', 'iOS >= 7', 'Opera >= 12', 'Safari >= 7.1', ]; /** * Webpack configuration (core/main.js => build/bundle.js) * http://webpack.github.io/docs/configuration.html */ const config = { // The base directory context: path.resolve(__dirname, '../src'), // The entry point for the bundle entry: { app: [ 'babel-polyfill', './main.js' ], vendor: [ 'es5-shim', 'es5-shim/es5-sham', 'es6-promise', 'fetch-detector', 'fetch-ie8', ] }, // Options affecting the output of the compilation output: { path: path.resolve(__dirname, '../build'), publicPath: '/', filename: 'assets/[name].js', chunkFilename: 'assets/[name].js', sourcePrefix: ' ', }, // Switch loaders to debug or release mode debug: DEBUG, cache: DEBUG, // Developer tool to enhance debugging, source maps // http://webpack.github.io/docs/configuration.html#devtool devtool: DEBUG ? 'source-map' : false, // What information should be printed to the console stats: { colors: true, reasons: DEBUG, hash: VERBOSE, version: VERBOSE, timings: true, chunks: VERBOSE, chunkModules: VERBOSE, cached: VERBOSE, cachedAssets: VERBOSE, }, // The list of plugins for Webpack compiler plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"', __DEV__: DEBUG, __BASENAME__: JSON.stringify(process.env.BASENAME || '') }), ], // Options affecting the normal modules module: { loaders: [ { test: /\.jsx?$/, include: [ path.resolve(__dirname, '../src'), ], loader: 'babel-loader', query: { // https://github.com/babel/babel-loader#options cacheDirectory: DEBUG, // https://babeljs.io/docs/usage/options/ babelrc: false, presets: [ 'react', 'es2015-loose', 'stage-1', ], plugins: [ 'transform-runtime', ...DEBUG ? [] : [ 'transform-react-remove-prop-types', 'transform-react-constant-elements', 'transform-react-inline-elements', 'transform-es3-modules-literals', 'transform-es3-member-expression-literals', 'transform-es3-property-literals' ], ], }, }, { test: /\.css/, loaders: [ 'style-loader', `css-loader?${JSON.stringify({ sourceMap: DEBUG, // CSS Modules https://github.com/css-modules/css-modules modules: true, localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]', // CSS Nano http://cssnano.co/options/ minimize: !DEBUG, })}`, 'postcss-loader?pack=default', ], }, { test: /\.scss$/, loaders: [ 'style-loader', `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`, 'postcss-loader?pack=sass', 'sass-loader', ], }, { test: /\.json$/, loader: 'json-loader', }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader', query: { name: DEBUG ? 'assets/[path][name].[ext]?[hash]' : '[hash].[ext]', limit: 10000, }, }, { test: /\.(eot|ttf|wav|mp3)$/, loader: 'file-loader', query: { name: DEBUG ? 'assets/[path][name].[ext]?[hash]' : '[hash].[ext]', }, }, ] }, // The list of plugins for PostCSS // https://github.com/postcss/postcss postcss(bundler) { return { default: [ // Transfer @import rule by inlining content, e.g. @import 'normalize.css' // https://github.com/postcss/postcss-import require('postcss-import')({ addDependencyTo: bundler }), // W3C variables, e.g. :root { --color: red; } div { background: var(--color); } // https://github.com/postcss/postcss-custom-properties require('postcss-custom-properties')(), // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em); // https://github.com/postcss/postcss-custom-media require('postcss-custom-media')(), // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { } // https://github.com/postcss/postcss-media-minmax require('postcss-media-minmax')(), // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6; // https://github.com/postcss/postcss-custom-selectors require('postcss-custom-selectors')(), // W3C calc() function, e.g. div { height: calc(100px - 2em); } // https://github.com/postcss/postcss-calc require('postcss-calc')(), // Allows you to nest one style rule inside another // https://github.com/jonathantneal/postcss-nesting require('postcss-nesting')(), // W3C color() function, e.g. div { background: color(red alpha(90%)); } // https://github.com/postcss/postcss-color-function require('postcss-color-function')(), // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); } // https://github.com/iamvdo/pleeease-filters require('pleeease-filters')(), // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; } // https://github.com/robwierzbowski/node-pixrem require('pixrem')(), // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { } // https://github.com/postcss/postcss-selector-matches require('postcss-selector-matches')(), // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors // https://github.com/postcss/postcss-selector-not require('postcss-selector-not')(), // Add vendor prefixes to CSS rules using values from caniuse.com // https://github.com/postcss/autoprefixer require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }), ], sass: [ require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }), ], }; }, }; // Optimize the bundle in release (production) mode if (!DEBUG) { config.plugins.push(new webpack.optimize.DedupePlugin()); config.plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: VERBOSE } })); config.plugins.push(new webpack.optimize.AggressiveMergingPlugin()); } module.exports = config;