commit db8831cc34859ff5de1a0e91b70c3b6a6848b9a2
parent 1bdd93b34bf709559ad66584baada966c28a6758
Author: Konstantin Tarkus <koistya@gmail.com>
Date: Fri, 27 Nov 2015 14:55:24 +0300
Merge pull request #331 from Frenzzy/entry-bundle-hash
Resolve long term caching by using webpack AssetsPlugin
Diffstat:
4 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
"superagent": "1.4.0"
},
"devDependencies": {
+ "assets-webpack-plugin": "^3.2.0",
"autoprefixer": "^6.1.0",
"babel": "^5.8.34",
"babel-eslint": "^4.1.4",
@@ -56,8 +57,8 @@
"replace": "^0.3.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
- "webpack": "^1.12.3",
- "webpack-dev-middleware": "^1.2.0",
+ "webpack": "^1.12.9",
+ "webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.5.0"
},
"jest": {
diff --git a/src/components/Html/Html.js b/src/components/Html/Html.js
@@ -10,6 +10,7 @@ class Html extends Component {
description: PropTypes.string,
css: PropTypes.string,
body: PropTypes.string.isRequired,
+ entry: PropTypes.string.isRequired,
};
static defaultProps = {
@@ -42,7 +43,7 @@ class Html extends Component {
</head>
<body>
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
- <script src="/app.js"></script>
+ <script src={this.props.entry}></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
</html>
diff --git a/src/server.js b/src/server.js
@@ -7,6 +7,7 @@ import React from 'react';
import ReactDOM from 'react-dom/server';
import Router from './routes';
import Html from './components/Html';
+import assets from './assets.json';
const server = global.server = express();
const port = process.env.PORT || 5000;
@@ -28,7 +29,7 @@ server.use('/api/content', require('./api/content'));
server.get('*', async (req, res, next) => {
try {
let statusCode = 200;
- const data = { title: '', description: '', css: '', body: '' };
+ const data = { title: '', description: '', css: '', body: '', entry: assets.app.js };
const css = [];
const context = {
onInsertCss: value => css.push(value),
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -10,6 +10,7 @@
import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';
+import AssetsPlugin from 'assets-webpack-plugin';
const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
@@ -105,13 +106,15 @@ const config = {
// -----------------------------------------------------------------------------
const appConfig = merge({}, config, {
- entry: [
- ...(WATCH ? ['webpack-hot-middleware/client'] : []),
- './src/app.js',
- ],
+ entry: {
+ app: [
+ ...(WATCH ? ['webpack-hot-middleware/client'] : []),
+ './src/app.js',
+ ],
+ },
output: {
path: path.join(__dirname, '../build/public'),
- filename: 'app.js',
+ filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
},
// Choose a developer tool to enhance debugging
@@ -119,6 +122,10 @@ const appConfig = merge({}, config, {
devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
plugins: [
new webpack.DefinePlugin(GLOBALS),
+ new AssetsPlugin({
+ path: path.join(__dirname, '../build'),
+ filename: 'assets.json',
+ }),
...(!DEBUG ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
@@ -171,6 +178,7 @@ const serverConfig = merge({}, config, {
},
target: 'node',
externals: [
+ /^\.\/assets\.json$/,
function filter(context, request, cb) {
const isExternal =
request.match(/^[@a-z][a-z\/\.\-0-9]*$/i) &&
