Skip to content

Commit b3670be

Browse files
committed
Improve long term caching by adding [chunkhash]
- Use `[chunkhash]` instead of `[hash]` in the names of bundles, it allows to save the bundle name if the content hasn't changed - Deduplicate assets, use the same `output.path` for files, fix kriasoft#362 - Use `path.resolve` everywhere in webpack config for consistency - Use `OccurrenceOrderPlugin` in debug mode too for [hot reload needs](https://github.com/glenjamin/webpack-hot-middleware#installation--usage) - Move generated (compiled) files from `public` to `public/assets` to not be mixed with other files like static html
1 parent 0de4958 commit b3670be

File tree

2 files changed

+26
-17
lines changed

2 files changed

+26
-17
lines changed

tools/start.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,22 @@ async function start() {
3030
// Patch the client-side bundle configurations
3131
// to enable Hot Module Replacement (HMR) and React Transform
3232
webpackConfig.filter(x => x.target !== 'node').forEach(config => {
33+
/* eslint-disable no-param-reassign */
3334
if (Array.isArray(config.entry)) {
3435
config.entry.unshift('webpack-hot-middleware/client');
3536
} else {
36-
/* eslint-disable no-param-reassign */
3737
config.entry = ['webpack-hot-middleware/client', config.entry];
38-
/* eslint-enable no-param-reassign */
3938
}
4039

40+
config.output.filename = config.output.filename.replace('[chunkhash]', '[hash]');
41+
config.output.chunkFilename = config.output.chunkFilename.replace('[chunkhash]', '[hash]');
4142
config.plugins.push(new webpack.HotModuleReplacementPlugin());
4243
config.plugins.push(new webpack.NoErrorsPlugin());
4344
config
4445
.module
4546
.loaders
4647
.filter(x => x.loader === 'babel-loader')
47-
.forEach(x => (x.query = { // eslint-disable-line no-param-reassign
48+
.forEach(x => (x.query = {
4849
...x.query,
4950

5051
// Wraps all React components into arbitrary transforms
@@ -66,6 +67,7 @@ async function start() {
6667
],
6768
],
6869
}));
70+
/* eslint-enable no-param-reassign */
6971
});
7072

7173
const bundler = webpack(webpackConfig);

tools/webpack.config.js

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@ const GLOBALS = {
3535
// -----------------------------------------------------------------------------
3636

3737
const config = {
38-
context: path.join(__dirname, '../src'),
38+
context: path.resolve(__dirname, '../src'),
3939

4040
output: {
41-
publicPath: '/',
41+
path: path.resolve(__dirname, '../build/public/assets'),
42+
publicPath: '/assets/',
4243
sourcePrefix: ' ',
4344
},
4445

@@ -94,11 +95,18 @@ const config = {
9495
},
9596
{
9697
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
97-
loader: 'url-loader?limit=10000',
98+
loader: 'url-loader',
99+
query: {
100+
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
101+
limit: 10000,
102+
},
98103
},
99104
{
100105
test: /\.(eot|ttf|wav|mp3)$/,
101106
loader: 'file-loader',
107+
query: {
108+
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
109+
},
102110
},
103111
{
104112
test: /\.jade$/,
@@ -108,7 +116,7 @@ const config = {
108116
},
109117

110118
resolve: {
111-
root: path.join(__dirname, '../src'),
119+
root: path.resolve(__dirname, '../src'),
112120
modulesDirectories: ['node_modules'],
113121
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
114122
},
@@ -145,9 +153,8 @@ const clientConfig = extend(true, {}, config, {
145153
entry: './client.js',
146154

147155
output: {
148-
path: path.join(__dirname, '../build/public'),
149-
filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
150-
chunkFilename: DEBUG ? '[name].[id].js?[hash]' : '[name].[id].[hash].js',
156+
filename: DEBUG ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
157+
chunkFilename: DEBUG ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
151158
},
152159

153160
target: 'web',
@@ -161,21 +168,22 @@ const clientConfig = extend(true, {}, config, {
161168
// Emit a file with assets paths
162169
// https://github.com/sporto/assets-webpack-plugin#options
163170
new AssetsPlugin({
164-
path: path.join(__dirname, '../build'),
171+
path: path.resolve(__dirname, '../build'),
165172
filename: 'assets.js',
166173
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
167174
}),
168175

176+
// Assign the module and chunk ids by occurrence count
177+
// Consistent ordering of modules required if using any hashing ([hash] or [chunkhash])
178+
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
179+
new webpack.optimize.OccurenceOrderPlugin(true),
180+
169181
...(DEBUG ? [] : [
170182

171183
// Search for equal or similar files and deduplicate them in the output
172184
// https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
173185
new webpack.optimize.DedupePlugin(),
174186

175-
// Assign the module and chunk ids by occurrence count
176-
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
177-
new webpack.optimize.OccurenceOrderPlugin(true),
178-
179187
// Minimize all JavaScript output of chunks
180188
// https://github.com/mishoo/UglifyJS2#compressor-options
181189
new webpack.optimize.UglifyJsPlugin({
@@ -204,8 +212,7 @@ const serverConfig = extend(true, {}, config, {
204212
entry: './server.js',
205213

206214
output: {
207-
path: path.join(__dirname, '../build'),
208-
filename: 'server.js',
215+
filename: '../../server.js',
209216
libraryTarget: 'commonjs2',
210217
},
211218

0 commit comments

Comments
 (0)