component-slider
Version:
used to show react components in carousal format
367 lines (319 loc) • 12.1 kB
JavaScript
import path from 'path';
import webpack from 'webpack';
import extend from 'extend';
import AssetsPlugin from 'assets-webpack-plugin';
import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';
const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1',
];
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG,
};
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
const config = {
context: path.resolve(__dirname, '../src'),
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, '../node_modules/react-routing/src'),
path.resolve(__dirname, '../src'),
],
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: DEBUG,
// https://babeljs.io/docs/usage/options/
babelrc: false,
presets: [
'react',
'es2015',
'stage-0',
],
plugins: [
'transform-runtime',
'lodash',
...DEBUG ? [] : [
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements',
],
],
},
},
{
test: /\.css/,
loaders: [
'isomorphic-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: [
'isomorphic-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]',
minimize: !DEBUG
})}`,
'postcss-loader?pack=sass',
'sass-loader',
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader',
query: {
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
limit: 10000,
},
},
{
test: /\.(eot|ttf|wav|mp3|svg|woff|woff2)$/,
loader: 'file-loader',
query: {
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
},
},
{
test: /\.jade$/,
loader: 'jade-loader',
},
],
},
resolve: {
root: path.resolve(__dirname, '../src'),
modulesDirectories: ['node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
},
cache: DEBUG,
debug: DEBUG,
stats: {
colors: true,
reasons: DEBUG,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: VERBOSE,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
},
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 }),
],
};
}
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = extend(true, {}, config, {
entry: './client.js',
output: {
filename: DEBUG ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
chunkFilename: DEBUG ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
},
target: 'web',
plugins: [
new LodashModuleReplacementPlugin({
paths: true
}),
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),
// Emit a file with assets paths
// https://github.com/sporto/assets-webpack-plugin#options
new AssetsPlugin({
path: path.resolve(__dirname, '../build'),
filename: 'assets.js',
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
}),
// Assign the module and chunk ids by occurrence count
// Consistent ordering of modules required if using any hashing ([hash] or [chunkhash])
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(true),
...DEBUG ? [] : [
// Search for equal or similar files and deduplicate them in the output
// https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
new webpack.optimize.DedupePlugin(),
// Minimize all JavaScript output of chunks
// https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
warnings: false,
},
output: { comments: false }
// ** LEGAL - IMPORTANT ** - this removes all comment
// including copyrights and * decrease the bundle size *
// By default comments with @license, @preserve or starting with /*! are preserved.
}),
// A plugin for a more aggressive chunk merging strategy
// https://webpack.github.io/docs/list-of-plugins.html#aggressivemergingplugin
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 })
],
],
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: 'source-map',
});
const componentsSliderConfig = extend(true, {}, config, {
entry: './components/ComponentsSlider/ComponentsSlider.js',
output: {
filename: 'main.js',
},
target: 'web',
plugins: [
new LodashModuleReplacementPlugin({
paths: true
}),
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),
// Assign the module and chunk ids by occurrence count
// Consistent ordering of modules required if using any hashing ([hash] or [chunkhash])
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(true),
...DEBUG ? [] : [
// Search for equal or similar files and deduplicate them in the output
// https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
new webpack.optimize.DedupePlugin(),
// Minimize all JavaScript output of chunks
// https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
warnings: false,
},
output: { comments: false }
// ** LEGAL - IMPORTANT ** - this removes all comment
// including copyrights and * decrease the bundle size *
// By default comments with @license, @preserve or starting with /*! are preserved.
})
],
],
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: 'source-map',
});
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = extend(true, {}, config, {
entry: './server.js',
output: {
filename: '../../server.js',
libraryTarget: 'commonjs2',
},
target: 'node',
externals: [
/^\.\/assets$/,
function filter(context, request, cb) {
const isExternal =
request.match(/^[@a-z][a-z\/\.\-0-9]*$/i);
cb(null, Boolean(isExternal));
},
],
plugins: [
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': false }),
// Adds a banner to the top of each generated chunk
// https://webpack.github.io/docs/list-of-plugins.html#bannerplugin
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
devtool: 'source-map',
});//componentSlider: './components/ComponentsSlider/ComponentsSlider.js'
export default [componentsSliderConfig, serverConfig];