I am currently updating an Angular 2 project written in Typescript with ES5 and Webpack 1 to utilize Webpack 5.
To solve problems with cachebusting, in the original instance the project has a webpack.config
shown below to generate a json
file that would detail the filenames of the created hashed chunks.
module.exports = {
entry: {
app: "./app/client/client-app.ts",
vendor: './app/client/client-vendor.ts',
polyfills: './app/client/client-polyfills.ts'
},
output: {
filename: "./app/libs/scripts/[name]-client.[chunkhash].js"
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new AssetsPlugin({
filename: 'webpack.assets.client.json',
path: './app/libs/scripts',
prettyPrint: true
}),
]
}
With the generated file looking like this..
{
"app": {
"js": "./app/libs/scripts/app-client.94fb68d639f7fe8ce258.js"
},
"polyfills": {
"js": "./app/libs/scripts/polyfills-client.970ace7dddd5f34afb5b.js"
},
"vendor": {
"js": "./app/libs/scripts/vendor-client.18346595f0e2d641067c.js"
}
}
and the folder of files looking like this.
In the latest version of Webpack 5 it is stated in the documentation the CommonsChunkPlugin
has been removed in favor of SplitChunksPlugin
. However when I make adjustments as seen below, the json file is still created successfully but all the accompanying js
files never make their way into the assigned repository, despite no errors appearing in my cmd
window. Is there something I am misunderstanding here?
const AssetsPlugin = require('assets-webpack-plugin');
var assetsPlugin = new AssetsPlugin({
filename: 'webpack-assets.client.json',
path: './app/libs/scripts',
prettyPrint: true,
removeFullPathAutoPrefix: true,
includeFilesWithoutChunk: true
});
module.exports = {
entry: {
app: './app/app.ts',
polyfills: './app/polyfills.ts',
vendor: './app/vendor.ts',
},
target: 'node',
output: {
filename: './app/libs/scripts/[name]-client.[chunkhash].js',
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
vendor: {
chunks: 'all',
test: /client-vendor.ts/
}
}
}
},
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: 'ts-loader'
}
}
]
},
mode: 'development',
resolve: {
"fallback": {
"timers": require.resolve("timers-browserify")
}
},
plugins: [assetsPlugin]
}
Newly generated json file.
{
"app": {
"js": "./app/libs/scripts/app-client.c8345edfa6da5d2ad827.js"
},
"polyfills": {
"js": "./app/libs/scripts/polyfills-client.fc21049a83789be81a52.js"
},
"vendor": {
"js": "./app/libs/scripts/vendor-client.d8b3a7d7af94ea7370c4.js"
}
}
Newly generated folder, lacking js
files..