3

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. enter image description here

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]
}

enter image description here

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..

enter image description here

Ron B.
  • 73
  • 6

0 Answers0