feat: use only webpack for build, use hashed filename scripts

iam4x · iam4x · commit 90234e52268b · 2015-04-08T13:02:32.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+**/webpack-stats.json
 coverage
 node_modules
 npm-debug.log
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "version": "0.0.3",
   "description": "An ES6 isomorphic Flux/ReactJS boilerplate",
   "main": "server/index.js",
-  "scripts": {},
+  "scripts": {
+    "build": "./node_modules/.bin/webpack --stats --config ./webpack/prod.config.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/iam4x/isomorphic-flux-boilerplate.git"
@@ -42,6 +44,7 @@
     "chai": "^2.2.0",
     "del": "^1.1.1",
     "eslint": "^0.18.0",
+    "eslint-loader": "^0.9.0",
     "esprima-fb": "^14001.1.0-dev-harmony-fb",
     "gulp": "^3.8.11",
     "gulp-autoprefixer": "^2.1.0",
diff --git a/server/router.jsx b/server/router.jsx
@@ -44,6 +44,8 @@ export default function *() {
     });
 
     const content = yield render(router);
-    yield this.render('main', {content});
+    const assets = require('./webpack-stats.json');
+
+    yield this.render('main', {content, assets});
   }
 };
diff --git a/server/views/layouts/index.hbs b/server/views/layouts/index.hbs
@@ -8,6 +8,8 @@
   </head>
   <body>
     {{{body}}}
-    <script src="/assets/js/app.js" async defer></script>
+    {{#each assets.script}}
+      <script src={{this}}></script>
+    {{/each}}
   </body>
 </html>
diff --git a/webpack/prod.config.js b/webpack/prod.config.js
@@ -0,0 +1,77 @@
+'use strict';
+
+/* jscs:disable requireCamelCaseOrUpperCaseIdentifiers */
+/* eslint camelcase: 0 */
+
+require('babel/register');
+
+var path = require('path');
+var webpack = require('webpack');
+
+var writeStats = require('./utils/write-stats');
+
+module.exports = {
+  devtool: 'source-map',
+  entry: {
+    app: './app/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../dist/js'),
+    filename: '[name]-[hash].js',
+    publicPath: '/assets/js/'
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.js$|.jsx$/,
+        exclude: /node_modules/,
+        loaders: ['eslint-loader']
+      }
+    ],
+    loaders: [
+      {
+        test: /\.js$|.jsx$/,
+        exclude: /node_modules/,
+        loaders: ['babel-loader']
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        BROWSER: JSON.stringify(true),
+        NODE_ENV: JSON.stringify('production')
+      }
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        screw_ie8: true,
+        sequences: true,
+        dead_code: true,
+        drop_debugger: true,
+        comparisons: true,
+        conditionals: true,
+        evaluate: true,
+        booleans: true,
+        loops: true,
+        unused: true,
+        hoist_funs: true,
+        if_return: true,
+        join_vars: true,
+        cascade: true,
+        drop_console: true
+      },
+      output: {
+        comments: false
+      }
+    }),
+    function () { this.plugin('done', writeStats); }
+  ],
+  resolve: {
+    extensions: ['', '.js', '.json', '.jsx'],
+    modulesDirectories: ['node_modules', 'app']
+  }
+};
diff --git a/webpack/utils/write-stats.js b/webpack/utils/write-stats.js
@@ -0,0 +1,32 @@
+'use strict';
+
+// borrowed from https://github.com/gpbl/isomorphic500/blob/master/webpack%2Futils%2Fwrite-stats.js
+import fs from 'fs';
+import path from 'path';
+
+const filepath = path.resolve(__dirname, '../../server/webpack-stats.json');
+
+export default function (stats) {
+  const publicPath = this.options.output.publicPath;
+  const json = stats.toJson();
+
+  // get chunks by name and extensions
+  const getChunks = function (name, ext) {
+    ext = ext || 'js';
+    let chunk = json.assetsByChunkName[name];
+
+    // a chunk could be a string or an array, so make sure it is an array
+    if (!(Array.isArray(chunk))) {
+      chunk = [chunk];
+    }
+
+    return chunk
+      .filter(chunk => path.extname(chunk) === `.${ext}`) // filter by extension
+      .map(chunk => `${publicPath}${chunk}`); // add public path to it
+  };
+
+  const script = getChunks('app', 'js');
+  const content = {script};
+
+  fs.writeFileSync(filepath, JSON.stringify(content));
+};

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+**/webpack-stats.json`
`1`	`2`	`coverage`
`2`	`3`	`node_modules`
`3`	`4`	`npm-debug.log`
Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,8 @@ export default function *() {`
`44`	`44`	`});`
`45`	`45`
`46`	`46`	`const content = yield render(router);`
`47`		`- yield this.render('main', {content});`
	`47`	`+ const assets = require('./webpack-stats.json');`
	`48`	`+`
	`49`	`+ yield this.render('main', {content, assets});`
`48`	`50`	`}`
`49`	`51`	`};`