make webpack configuration tidy

build/webpack.config.base.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const webpack = require('webpack');
+const BowerWebpackPlugin = require('bower-webpack-plugin');
+
+const srcPath = path.join(__dirname, '/../src');
+
+module.exports = {
+    output: {
+        path: path.join(__dirname, '/../dist/assets'),
+        filename: 'bundle.js',
+        publicPath: '/assets/'
+    },
+    resolve: {
+        extensions: ['', '.js', '.jsx'],
+        alias: {
+            actions: `${srcPath}/actions/`,
+            components: `${srcPath}/components/`,
+            containers: `${srcPath}/containers/`,
+            reducers: `${srcPath}/reducers/`,
+            sources: `${srcPath}/sources/`,
+            stores: `${srcPath}/stores/`,
+            styles: `${srcPath}/styles/`,
+            config: `${srcPath}/config/base`,
+            'react/lib/ReactMount': 'react-dom/lib/ReactMount'
+        }
+    },
+    module: {
+        loaders: [{
+            test: /\.css$/,
+            loader: 'style-loader!css-loader?outputStyle=expanded'
+        }, {
+            test: /\.sass/,
+            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+        }, {
+            test: /\.scss/,
+            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+        }, {
+            test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)(\?|\?[a-z0-9]+)?$/,
+            loader: 'url-loader?limit=8192'
+        }, {
+            test: /\.(mp4|ogg)$/,
+            loader: 'file-loader'
+        }, {
+            test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
+            loader: 'imports?define=>false&this=>window'
+        }]
+    },
+    plugins: [
+        new webpack.NoErrorsPlugin(),
+        new BowerWebpackPlugin({
+            searchResolveModulesDirectories: false
+        })
+    ]
+};

build/webpack.config.dev.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const webpack = require('webpack');
+const OpenBrowserPlugin = require('open-browser-webpack-plugin');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+
+module.exports = {
+    devServer: {
+        contentBase: './src/',
+        historyApiFallback: true,
+        inline: true,
+        port: 23333,
+        publicPath: '/assets/',
+        noInfo: false,
+        stats: {
+            colors: true
+        },
+        quiet: true
+    },
+    entry: [
+        'babel-polyfill',
+        'webpack-dev-server/client?http://127.0.0.1:23333',
+        'webpack/hot/only-dev-server',
+        'es6-promise',
+        'whatwg-fetch',
+        './src/index'
+    ],
+    cache: true,
+    devtool: 'eval',
+    module: {
+        preLoaders: [{
+            test: /\.(js|jsx)$/,
+            include: path.join(__dirname, '/../src'),
+            loader: 'eslint-loader'
+        }],
+        loaders: [{
+            test: /\.(js|jsx)$/,
+            loader: 'react-hot!babel-loader',
+            include: [].concat([path.join(__dirname, '/../src')])
+        }]
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': '"development"'
+        }),
+        new webpack.NoErrorsPlugin(),
+        new FriendlyErrorsPlugin(),
+        new OpenBrowserPlugin({ url: 'http://localhost:23333' })
+    ]
+};

build/webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.config.base');
+const devConfig = require('./webpack.config.dev');
+const prodConfig = require('./webpack.config.prod');
+const testConfig = require('./webpack.config.test');
+
+const allowedEnvs = ['development', 'production'];
+
+
+function buildConfig(wantedEnv) {
+    const isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
+    const validEnv = isValid ? wantedEnv : 'development';
+    process.env.NODE_ENV = validEnv;
+    process.env.BABEL_ENV = validEnv;
+
+    let config;
+    if (validEnv === 'production') {
+        config = prodConfig;
+    } else {
+        config = devConfig;
+    }
+
+    config = merge(baseConfig, config);
+    return config;
+}
+
+module.exports = buildConfig(process.env.NODE_ENV);

build/webpack.config.prod.js

@@ -0,0 +1,125 @@
+const path = require('path');
+const fs = require('fs');
+const webpack = require('webpack');
+const minify = require('html-minifier').minify;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+    entry: [
+        'babel-polyfill',
+        'es6-promise',
+        'whatwg-fetch',
+        path.join(__dirname, '../src/index')
+    ],
+    output: {
+        path: path.join(__dirname, '/../dist/assets'),
+        filename: 'bundle.js',
+        publicPath: '/assets/'
+    },
+    cache: false,
+    devtool: 'cheap-module-inline-source-map',
+    module: {
+        loaders: [{
+            test: /\.(js|jsx)$/,
+            loader: 'babel-loader',
+            include: [].concat([path.join(__dirname, '/../src')])
+        }]
+    },
+    plugins: [
+        new webpack.optimize.DedupePlugin(),
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': '"production"'
+        }),
+        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false,
+                drop_console: true
+            },
+            beautify: false,
+            comments: false
+        }),
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.optimize.AggressiveMergingPlugin(),
+        new BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            reportFilename: path.join(__dirname, '/../dist/report.html'),
+            openAnalyzer: false,
+            generateStatsFile: false
+        }),
+        function() {
+            this.plugin('done', function(statsData) {
+                let stats = statsData.toJson();
+                if (!stats.errors.length) {
+                    let htmlFileNames = ['/../dist/index.html', '/../dist/404.html'];
+                    htmlFileNames.map(function(htmlFileName) {
+                        let htmlFilePath = path.join(__dirname, htmlFileName);
+                        let html = fs.readFileSync(htmlFilePath, 'utf8');
+
+                        // let htmlOutput = html.replace(
+                        //   /<script\s+src=(["'])(.+?)bundle\.js\1/i,
+                        //   '<script src=$1$2' + stats.assetsByChunkName.main + '?' + stats.hash + '$1');
+
+                        let htmlOutput = html.replace(
+                            /<script\s+src=(["'])(.+?)bundle\.js(.*)<\/script>/i,
+                            `<script type="text/javascript">
+(function(hash, src, localStorage, document, window) {
+  var createScript = function(url) {
+    var script = document.createElement("script");
+    script.setAttribute("src", url);
+    document.body.appendChild(script);
+  };
+
+  var runScript = function(code) {
+    if (window.execScript) {
+      window.execScript(code);
+    } else {
+      var head = document.head;
+      var script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.text = code;
+      head.removeChild(head.appendChild(script));
+    }
+  };
+
+  if (localStorage) {
+    if (localStorage.bundle && localStorage.hash == hash) {
+      runScript(localStorage.bundle);
+    } else {
+      var xhr = new XMLHttpRequest;
+      xhr.open("GET", src, true);
+      xhr.onload = function() {
+        var res = xhr.responseText;
+        if (res && res.match(/^!function/)) {
+          localStorage.bundle = res;
+          runScript(localStorage.bundle);
+          localStorage.hash = hash;
+        } else {
+          createScript(src);
+        }
+      };
+      xhr.send();
+    }
+  } else {
+    createScript(src);
+  }
+})("${stats.hash}", "$2${stats.assetsByChunkName.main}?${stats.hash}", window.localStorage, document, window);
+</script>`);
+
+                        htmlOutput = minify(htmlOutput, {
+                            collapseWhitespace: true,
+                            removeComments: true,
+                            minifyJS: true,
+                            minifyCSS: true,
+                            processConditionalComments: true
+                        });
+
+                        fs.writeFileSync(htmlFilePath, htmlOutput);
+                    });
+
+
+                }
+            });
+        }
+    ]
+};

build/webpack.config.test.js

@@ -0,0 +1,51 @@
+const path = require('path');
+
+const srcPath = path.join(__dirname, '/../src');
+
+module.exports = {
+    devtool: 'eval',
+    module: {
+        preLoaders: [{
+            test: /\.(js|jsx)$/,
+            loader: 'isparta-instrumenter-loader',
+            include: [
+                path.join(__dirname, '/../src')
+            ]
+        }],
+        loaders: [{
+                test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
+                loader: 'null-loader'
+            },
+            {
+                test: /\.(js|jsx)$/,
+                loader: 'babel-loader',
+                include: [].concat([
+                    path.join(__dirname, '/../src'),
+                    path.join(__dirname, '/../test')
+                ])
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            actions: `${srcPath}/actions/`,
+            components: `${srcPath}/components/`,
+            containers: `${srcPath}/containers/`,
+            reducers: `${srcPath}/reducers/`,
+            sources: `${srcPath}/sources/`,
+            stores: `${srcPath}/stores/`,
+            styles: `${srcPath}/styles/`,
+            config: `${srcPath}/config/base`,
+            helpers: path.join(__dirname, '/../test/helpers'),
+        }
+    },
+    externals: {
+        cheerio: 'window',
+        'react/addons': true,
+        'react/lib/ExecutionEnvironment': true,
+        'react/lib/ReactContext': true
+    },
+    node: {
+        fs: 'empty'
+    }
+};