Search code examples
javascriptwebpackvue.jswebpack-3

How to prevent Webpack from removing other files in output path?


Let's say I compile some JS assets to dist/static/js:

output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    },

Before running npm run build I create one file in /dist/, /static/ and /js/.

After running npm run build this file was removed. The one created in /static/ and /js/ is gone. How can I prevent it?

I'm using Vue.js/Webpack boilerplate: https://github.com/vuejs-templates/webpack


Solution

  • If you look here:

    https://github.com/vuejs-templates/webpack/blob/17ed63b1b3a0eaaebd3f593c08c32107a7cb7e01/template/build/build.js

    You can see that a package called rimraf is being imported:

    const rm = require('rimraf')
    

    This package is responsible for clearing out your assetsRoot and assetsSubDirectory. This is a good thing because usually when you re-run your build process from nothing, you want a clean slate to begin with.

    I would advise you not to disable this but rather put your file in another directory or let your Javascript generate your file since the removal takes places before the compilation.