Webpack config

webpack/constants.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+const SRC_FOLDER = 'src'
+const APP_ROOT = path.normalize(path.join(__dirname, '..'))
+
+const constants = Object.freeze({
+    APP_NAME: 'debats',
+    APP_ROOT,
+    APP_PATH: path.join(APP_ROOT, SRC_FOLDER),
+    STATIC_PATH: path.join(APP_ROOT, SRC_FOLDER, 'static'),
+    SRC_FOLDER,
+})
+module.exports = constants

webpack/postcss-processors.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const lost = require('lost');
+const atImport = require('postcss-import');
+const postcssMixins = require('postcss-mixins');
+const postcssNext = require('postcss-cssnext');
+const webpackPostcssTools = require('webpack-postcss-tools');
+const postcssAssets = require('postcss-assets');
+const postcssColorFunction = require('postcss-color-function');
+const postcssShortPosition = require('postcss-short-position');
+const postcssInlineSVG = require('postcss-inline-svg');
+const postcssHide = require('postcss-hide');
+
+const CONSTANTS = require('./constants');
+
+const makeMap = path => {
+    try {
+        return webpackPostcssTools.makeVarMap(path);
+    } catch (e) {
+        console.log(path + ' not found.');
+        process.exit(1);
+    }
+};
+
+const map = makeMap('./src/styles/_constants.css');
+
+module.exports = webpack => [
+    postcssMixins({
+        mixinsDir: path.join(CONSTANTS.APP_PATH, 'style', 'mixins'),
+    }),
+    atImport({
+        addDependencyTo: webpack,
+        root: CONSTANTS.APP_PATH,
+        path: ['style', 'web_modules'],
+    }),
+    postcssShortPosition(),
+    postcssAssets(),
+    postcssColorFunction(),
+    postcssNext({
+        features: {
+            customProperties: {
+                variables: map.vars,
+                warnings: false,
+            },
+        },
+    }),
+    lost(),
+    postcssInlineSVG(),
+    postcssHide(),
+];

webpack/webpack.base.config.js

@@ -0,0 +1,71 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const postcssProcessors = require('./postcss-processors');
+
+
+const CONSTANTS = require('./constants');
+const APP_ROOT = CONSTANTS.APP_ROOT;
+const APP_PATH = CONSTANTS.APP_PATH;
+const APP_NAME = CONSTANTS.APP_NAME;
+const SRC_FOLDER = CONSTANTS.SRC_FOLDER;
+
+
+const plugins = [];
+plugins.push(new webpack.NoErrorsPlugin());                                 // No assets emitted with errors
+plugins.push(new ExtractTextPlugin('[name].[contenthash].css', { allChunks: false }));  // Extract CSS to external style.css file
+plugins.push(new HtmlWebpackPlugin({ template: SRC_FOLDER + '/index.html', inject: false, filename: 'index.html' }));
+
+
+module.exports = {
+    resolve: {
+        alias: {
+            react: path.resolve(APP_ROOT, 'node_modules/react'),
+        },
+        modulesDirectories: ['src', 'web_modules', 'node_modules'],
+        extensions: ["", ".js", ".jsx"]
+    },
+    entry: APP_PATH + ('/index.js'),
+    output: {
+        filename: APP_NAME + '.[name].[hash].js',
+    },
+    externals: {
+        TweenLite: 'TweenLite',
+    },
+    node: {
+        fs: 'empty',
+    },
+    plugins,
+    module: {
+        loaders: [
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!postcss-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.(png|svg|gif|jpeg|jpg)$/,
+                include: APP_PATH,
+                loader: 'file-loader?name=images/[name].[ext]',
+            },
+            {
+                test: /\.(eot|woff|ttf)$/,
+                loader: 'file-loader?name=fonts/[name].[ext]',
+            },
+            {
+                test: /\.json$/,
+                loader: 'json',
+            },
+        ],
+    },
+    postcss: webpack => postcssProcessors(webpack),
+}

webpack/webpack.build.dev.config.js

@@ -0,0 +1,27 @@
+const config = require('./webpack.base.config');
+
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const CONSTANTS = require('./constants');
+const APP_ROOT = CONSTANTS.APP_ROOT;
+const APP_PATH = CONSTANTS.APP_PATH;
+const APP_NAME = CONSTANTS.APP_NAME;
+const SRC_FOLDER = CONSTANTS.SRC_FOLDER;
+
+const env = 'development';
+process.env.BABEL_ENV = env;
+process.env.NODE_ENV = env;
+
+const outputPath = path.resolve(APP_ROOT + '/build/dev');
+
+const copy_config = [{ context: SRC_FOLDER + '/static', from: '**/*', to: outputPath }];
+
+config.plugins.push(new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }));
+config.plugins.push(new CopyWebpackPlugin(copy_config));
+config.devtool = 'source-map';
+config.cache = true;
+config.debug = true;
+config.output.path = outputPath;
+
+module.exports = config;

webpack/webpack.build.prod.config.js

@@ -0,0 +1,40 @@
+const config = require('./webpack.base.config');
+
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const CONSTANTS = require('./constants');
+const APP_ROOT = CONSTANTS.APP_ROOT;
+const APP_PATH = CONSTANTS.APP_PATH;
+const APP_NAME = CONSTANTS.APP_NAME;
+const SRC_FOLDER = CONSTANTS.SRC_FOLDER;
+
+const env = 'production';
+process.env.BABEL_ENV = env;
+process.env.NODE_ENV = env;
+
+const outputPath = path.resolve(APP_ROOT + '/build/prod');
+
+const copy_config = [{ context: SRC_FOLDER + '/static', from: '**/*', to: outputPath }];
+
+config.plugins.push(new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }));
+config.plugins.push(new webpack.optimize.DedupePlugin());
+config.plugins.push(new webpack.optimize.OccurenceOrderPlugin(true));              // Assign the module and chunk ids by occurrence count
+config.plugins.push(new webpack.optimize.UglifyJsPlugin({
+    compressor: {screw_ie8: false, keep_fnames: true, warnings: true},
+    mangle: {
+        except: ['$super', '$', 'exports', 'require'],
+        screw_ie8: false,
+        keep_fnames: true,
+    },
+}));
+// config.plugins.push(new CompressionPlugin({threshold: 10240}));
+config.plugins.push(new CopyWebpackPlugin(copy_config));
+config.devtool = 'cheap-module-source-map';
+config.cache = false;
+config.debug = false;
+config.entry = APP_PATH + ('/index.js');
+config.output.path = outputPath;;
+
+
+module.exports = config;

webpack/webpack.dev.server.config.js

@@ -0,0 +1,61 @@
+const config = require('./webpack.base.config');
+
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const CONSTANTS = require('./constants');
+const APP_ROOT = CONSTANTS.APP_ROOT;
+const APP_PATH = CONSTANTS.APP_PATH;
+const APP_NAME = CONSTANTS.APP_NAME;
+const SRC_FOLDER = CONSTANTS.SRC_FOLDER;
+
+const args = require('yargs').argv;
+
+const env = 'development';
+process.env.BABEL_ENV = env;
+process.env.NODE_ENV = env;
+
+const outputPath = path.resolve(APP_ROOT + '/build/dev-server');
+
+const copy_config = [
+    {context: SRC_FOLDER + '/static', from: '**/*', to: outputPath},
+    {from: 'mocks', to: outputPath + '/fake-api'},
+];
+
+config.plugins.push(new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }));
+config.plugins.push(new webpack.NamedModulesPlugin());
+config.plugins.push(new CopyWebpackPlugin(copy_config));
+config.output.path = outputPath;
+config.devtool = 'source-map';
+config.cache = true;
+config.debug = true;
+
+var devServerAPIUrl, devServerRewrite;
+if (args.proxy) {
+    if (args.mockAPI) {
+        devServerAPIUrl = 'http://localhost:3000';
+        devServerRewrite = function(req) {
+            req.url = req.url
+                    .replace(/\/api\//, '/fake-api/')       // Local mocks as API
+                    .split('?')[0];                         // strip query string if exists
+            if (req.method === "POST") req.method = 'GET';  // Change to GET only
+        };
+    }
+    if (args.prodAPI) devServerAPIUrl = 'http://api.débats.co';
+};
+
+config.devServer = {
+    quiet: false,
+        stats: { colors: true },
+    outputPath,
+        proxy: {
+        '/api/*': {
+            target: devServerAPIUrl,
+            rewrite: devServerRewrite,
+            changeOrigin: true,
+            secure: false,
+        },
+    },
+};
+
+module.exports = config;