Webpack: Clean up chunks - but only chunks

user_7510971 0
Viewed 361

I am using the chunking-feature of webpack (^5.44.0) to create chunks. This works fine, but I mentioned that there are lots of chunks created over days

-rw-r--r--    1 user  staff   135K Jul 14 14:24 home-view.7a174a95c4b6c5db7d16.js
-rw-r--r--    1 user  staff   135K Jul 21 16:35 home-view.883b7079d7003f7aa412.js
-rw-r--r--    1 user  staff   135K Jul 21 16:36 home-view.8e332e11ef50c41b6e9e.js
#redacted for better readability...

This is the webpack.mix.js (as I am using Laravel-mix):

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
});

mix.js("resources/js/main.js", "public/js").vue();

mix.extract(['vue']);

if (mix.inProduction()) {
    mix
        .version();
}

If I extend this to

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
        clean: true
    },
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
});

mix.js("resources/js/main.js", "public/js").vue();

mix.extract(['vue']);

if (mix.inProduction()) {
    mix
        .version();
}

all content in the public directory is wiped away, even those files I need:

public
├── css
│   └── app.css
├── favicon.ico
├── fonts
│   ├── ...
├── index.php
├── js
│   ├── chunks
│   │   ...
│   ├── main.js
│   ├── manifest.js
│   └── vendor.js
├── mix-manifest.json
├── robots.txt
├── storage -> /var/www/html/storage/app/public
└── web.config

But I really just want webpack to clean up everything stored in ./chunks

laravel-mix webpack
2 Answers

Webpack output clean method mainly designed to clean whole output folder. However since you are using it with Laravel (i am not familiar with it) some important files are mixed in your public folder. I see two ways to solve this problem.

First option is you can put your webpack assets to other folder in public then webpack will clean only this assets folder:

output: {
  path: path.resolve(__dirname, 'dist/assets'),
  clean: true,
}

The other options is to put all your important files under static folder and then just exclude this path from cleaning:

output: {
  clean: {
    keep(filePath) {
      return filePath.includes('static');
    },
  },
}
user_32314120

you can just keep everything that doesn't contain js/chunks using regex; try:

output: {
   clean: {
      keep: /^(?!.*js\/chunks.*$).*
   }
}

https://regex101.com/r/62cRgG/1

Admin1
Related