#242: use dll plugin in development mode

.gitignore

@@ -1,4 +1,5 @@
-node_modules
+/node_modules
-dist
+/dist
+/dll
 config/*
 !config/template.*

karma.conf.js

@@ -15,6 +15,7 @@ module.exports = function(config) {
 
         // list of files / patterns to load in the browser
         files: [
+            'dll/vendor.dll.js',
             'tests/index.js'
         ],
 

package.json

@@ -13,7 +13,8 @@
     "test": "karma start ./karma.conf.js",
     "lint": "eslint ./src",
     "i18n": "babel-node ./scripts/i18n-collect.js",
-    "build": "rm -rf dist/ && webpack --progress --colors -p"
+    "build": "rm -rf dist/ && webpack --progress --colors -p",
+    "build:dll": "webpack --progress --colors --config webpack.dll.config.js"
   },
   "dependencies": {
     "babel-polyfill": "^6.3.14",

src/index.ejs

@@ -19,6 +19,15 @@
 <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
 <% } %>
+
+<% if (htmlWebpackPlugin.options.scripts) {
+    htmlWebpackPlugin.options.scripts.forEach(function(scriptSrc) {
+    %>
+        <script src="<%= scriptSrc %>"></script>
+    <%
+    });
+} %>
+
 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
 <% } %>

webpack.config.js

@@ -10,8 +10,6 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const cssUrl = require('webpack-utils/cssUrl');
 const cssImport = require('postcss-import');
 
-const vendor = Object.keys(require('./package.json').dependencies);
-
 const rootPath = path.resolve('./src');
 const outputPath = path.join(__dirname, 'dist');
 
@@ -78,8 +76,7 @@ const webpackConfig = {
     cache: true,
 
     entry: {
-        app: path.join(__dirname, 'src'),
+        app: path.join(__dirname, 'src')
-        vendor: vendor
     },
 
     output: {
@@ -116,6 +113,7 @@ const webpackConfig = {
         new HtmlWebpackPlugin({
             template: 'src/index.ejs',
             favicon: 'src/favicon.ico',
+            scripts: ['dll/vendor.dll.js'],
             hash: false, // webpack does this for all our assets automagically
             filename: 'index.html',
             inject: false,
@@ -123,13 +121,11 @@ const webpackConfig = {
                 collapseWhitespace: isProduction
             },
             ga: config.ga
+        }),
+        new webpack.ProvidePlugin({
+            React: 'react'
         })
-    ].concat(isTest ? [] : [
+    ],
-        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js?[hash]')
-    ]).concat(isProduction ? [
-        new webpack.optimize.DedupePlugin(),
-        new webpack.optimize.UglifyJsPlugin()
-    ] : []),
 
     module: {
         loaders: [
@@ -237,11 +233,26 @@ if (isProduction) {
         }
     });
 
-    webpackConfig.plugins.push(new ExtractTextPlugin('styles.css', {
+    webpackConfig.plugins.push(
-        allChunks: true
+        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js?[hash]'),
-    }));
+        new webpack.optimize.OccurenceOrderPlugin(true),
+        new webpack.optimize.DedupePlugin(),
+        new webpack.optimize.UglifyJsPlugin(),
+        new ExtractTextPlugin('styles.css', {
+            allChunks: true
+        })
+    );
 
     webpackConfig.devtool = false;
+
+    webpackConfig.entry.vendor = Object.keys(require('./package.json').dependencies);
+} else {
+    webpackConfig.plugins.push(
+        new webpack.DllReferencePlugin({
+            context: __dirname,
+            manifest: require('./dll/vendor.json')
+        })
+    );
 }
 
 if (!isProduction && !isTest) {

webpack.dll.config.js

@@ -0,0 +1,65 @@
+/* eslint-env node */
+
+const path = require('path');
+
+const webpack = require('webpack');
+
+const vendor = Object.keys(require('./package.json').dependencies);
+
+const isProduction = process.argv.some((arg) => arg === '-p');
+
+const isTest = process.argv.some((arg) => arg.indexOf('karma') !== -1);
+
+process.env.NODE_ENV = 'development';
+if (isTest) {
+    process.env.NODE_ENV = 'test';
+}
+
+const outputPath = path.join(__dirname, 'dll');
+
+const webpackConfig = {
+    entry: {
+        vendor: vendor.concat([
+            'core-js/library',
+            'react-addons-perf',
+            'redux-devtools',
+            'redux-devtools-dock-monitor',
+            'redux-devtools-log-monitor',
+            'react-transform-hmr',
+            'react-transform-catch-errors',
+            'redbox-react',
+            'react-intl/locale-data/en.js',
+            'react-intl/locale-data/ru.js',
+            'react-intl/locale-data/be.js',
+            'react-intl/locale-data/uk.js'
+        ])
+    },
+
+    output: {
+        filename: '[name].dll.js?[hash]',
+        path: outputPath,
+        library: '[name]',
+        publicPath: '/'
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+            },
+            __DEV__: true,
+            __TEST__: isTest,
+            __PROD__: false
+        }),
+        new webpack.DllPlugin({
+            name: '[name]',
+            path: path.join(outputPath, '[name].json')
+        })
+    ].concat(isProduction ? [
+        new webpack.optimize.DedupePlugin(),
+        new webpack.optimize.OccurenceOrderPlugin(true),
+        new webpack.optimize.UglifyJsPlugin()
+    ] : [])
+};
+
+module.exports = webpackConfig;