Scenario
I am trying to use webpack to bundle my provider scripts separately from application scripts.
Attempt 1
index.js
var _ = require('lodash'); console.log(_)
webpack.config.js
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var config = { entry: { vendor: ['lodash'], app: './index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, }), new HtmlWebpackPlugin({ filename: 'index.html', inject: true }) ] }; module.exports = config;
results
Asset Size Chunks Chunk Names app.3437c5da57e0c6671675.js 145 bytes 0 [emitted] app vendor.72c95e21a8d7096d53bc.js 428 kB 1 [emitted] vendor index.html 232 bytes [emitted]
Now, if I made changes to index.js
index.js
var _ = require('lodash'); console.log('changed index'); console.log(_)
results
Asset Size Chunks Chunk Names app.c724350371b50a9afeb2.js 177 bytes 0 [emitted] app vendor.0e76f9c86cbe02606265.js 428 kB 1 [emitted] vendor index.html 232 bytes [emitted]
Both hashes are changing, although I only updated the index file.
Difference Between Two Provider Files
vendor.72c95e21a8d7096d53bc.js
script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"3437c5da57e0c6671675"}[chunkId] + ".js";
vendor.0e76f9c86cbe02606265.js
script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"c724350371b50a9afeb2"}[chunkId] + ".js";
Attempt 2
After some research, I found an article below that explains that webpack generates a chuck manifest containing the identifiers of the pieces that are placed in the input block. This explains the difference above. The solution is to extract the chap manifest into a separate file.
https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95
index.js
var _ = require('lodash'); console.log(_)
webpack.config.js
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'); var config = { entry: { vendor: ['lodash'], app: './index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, }), new ChunkManifestPlugin({ filename: "manifest.json", manifestVariable: "webpackManifest" }), new HtmlWebpackPlugin({ filename: 'index.html', inject: true }) ] }; module.exports = config;
results
Asset Size Chunks Chunk Names app.3437c5da57e0c6671675.js 145 bytes 0 [emitted] app manifest.json 35 bytes [emitted] vendor.72c95e21a8d7096d53bc.js 428 kB 1 [emitted] vendor
Now, if I made changes to index.js
index.js
var _ = require('lodash'); console.log('changed index'); console.log(_)
results
Asset Size Chunks Chunk Names app.c724350371b50a9afeb2.js 177 bytes 0 [emitted] app manifest.json 35 bytes [emitted] vendor.0e76f9c86cbe02606265.js 428 kB 1 [emitted] vendor
Both hashes changed again, although I only updated the index file.
This time, however, there are no differences between the two provider files.
Questions
Is there a reason this scenario does not work, or am I fundamentally wrong with this problem.
Is there an easier way using webpack to achieve what I'm trying to do, because even if I get the above step, I will have to read the manifest and then enter it on my index.html page?