I'm not very familiar with webpack, and I was very afraid that what I implemented for cache busting would break something. What I have seems to work. When I open up the built folder, under pub
, I see 3 files:
- main.someHashHere.js
- index.html
- manifest.someOtherHashHere.js
Previously, before I implemented cache-busting, there was no index.html. (1) I'm wondering, is it supposed to show up in this folder with the other two js files? (In previous deployments, before adding cache-busting, it there was no index.html file there).
Here's what I have:
var path = require('path');
var webpack = require('webpack');
var AssetsPlugin = require('assets-webpack-plugin'); // *
var HtmlWebpackPlugin = require('html-webpack-plugin'); // *
var WebpackMd5Hash = require('webpack-md5-hash'); // *
var basePlugins = [
new webpack.DefinePlugin({
__PRODUCTION__: true,
'process.env.NODE_ENV': JSON.stringify('production'),
}),
];
var usedPlugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
}),
new webpack.optimize.CommonsChunkPlugin({ // *
names: "manifest" // *
}), // *
new AssetsPlugin(), // *
new HtmlWebpackPlugin(), // *
new WebpackMd5Hash(), // *
];
/* Config */
module.exports = {
entry: {
main: [path.join(__dirname, '/lib/main')],
},
eslint: {
configFile: 'lib/.eslintrc',
},
resolve: {
root: path.resolve(__dirname, 'lib'),
alias: {
...
},
},
output: {
path: path.join(__dirname, '/pub/'),
filename: '[name].[chunkhash].js', // *
chunkFilename: '[name].[chunkhash].js', // *
sourceMapFilename: '[name].js.map',
publicPath: '/pub/',
},
plugins: usedPlugins,
module: {
preLoaders: [
...
],
loaders: [
...
],
},
};
Everything commented with an asterik was included for the sole purpose of cache-busting.
(2) What I'm most concerned about is whether or not I have added anything that will be breaking or have any unintended consequences?