Webpack 5: Create vendor chunk(s) from .js files

Question

Simply I want to insert vendor scripts in my HTML template.

These scripts are collected in the src/vendor directory.

I want to import them in my template HTML file as <script>.

For example:

<script src="../vendor/luxon.min.js"></script>

When I run webpack, it stores luxon in the dist/assets directory with the name ba9f5c2186e41fc21fa3.js. The HTML file cannot import the script because the name`- which is created by webpack - is wrong:

<script src="assets/8939b829f8da59dc2687.js"></script>

How can I insert my vendor js files to my HTML?

My webpack config:

   mode: "production",
   entry: {
        base: "./src/base.ts",
        material: "./src/ts/material.ts",
    },
    output: {
        filename: "[name]-[contenthash].js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
        assetModuleFilename: 'assets/[hash][ext][query]',
        chunkFilename: "[id].chunk.js",
        library: pkg.name,
        libraryTarget: 'umd',
    },
    module: {
        rules: [
            // Resolves urls in templates from <img>
            {
                test: /\.html$/i,
                use: ["html-loader",],
            },
            // Support typescript
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            // Supports importing graphics in js/ts and html.
            {
                test: /\.(svg|png|jpg|jpeg|gif)$/i,
                type: "asset/resource",
                generator: {
                    filename: 'assets/images/[hash][ext][query]'
                }
            },
            // Support importing fonts
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'assets/fonts/[hash][ext][query]'
                }
            },
            // SASS support.
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPliugin.loader, // Extract css into files
                    "css-loader", // Turns css into commonjs
                    "postcss-loader", // Cross browser support
                    "sass-loader", // Turns sass into css
                ],
            },
        ]
    },
    plugins: [
        new MiniCssExtractPliugin({
            filename: "css/[name]-[contenthash].css",
        }),
        new HtmlWebpackPlugin({
            title: 'index',
            filename: 'index.html',
            template: "./src/templates/index.html",
            chunks: ['base'],
        }),
        new HtmlWebpackPlugin({
            title: 'about',
            filename: 'about.html',
            template: './src/templates/about.html',
            chunks: ['material'],
        }),
    ],
    optimization: {
        minimize: true, // Minimize css
    },
    alias: {
            Style: path.resolve(__dirname, 'src/sass'),
            Fonts: path.resolve(__dirname, 'src/fonts'),
            Images: path.resolve(__dirname, 'src/images'),
        },
        extensions: ['.ts'],
    // External libraries which are ignored.
    externals: {
        luxon: 'luxon',
    },

I tried to add a rule so that the name of the imported js files do not change, but then my loaders throw many errors.

 {
                test: /\.js$/i,
                type: "asset/resource",
                generator: {
                    filename: 'vendor/[name][ext][query]'
                }
            },

Edit: Tried the code-splitting example from webpack documentation (Prevent Duplication). Now a new bundle is created using the luxon.min.js. Unfortunately it is now complete useless because you cannot use any function of luxon anymore (typing luxon.DateTime in the browser console returns luxon is not defined).

   entry: {
        base: {
            import: "./src/base.ts"
        },
        material: {
            import: "./src/ts/material.ts",
            dependOn: 'shared',
        },
        shared: './src/vendor/luxon.min.js',
    },
    ... 
    optimization: {
        minimize: true, // Minimize css
        runtimeChunk: 'single',
    },

Webpack 5: Create vendor chunk(s) from .js files

0 Answers0