johnagan / clean-webpack-plugin

A webpack plugin to remove your build folder(s) before building
MIT License
1.96k stars 137 forks source link

cleanOnceBeforeBuildPatterns run every time, not just the first time. #118

Closed alexanderdevm closed 5 years ago

alexanderdevm commented 5 years ago

Issue description or question

After updating clean-webpack-plugin to v2 , the output.path get cleaned on every save not just once and only during initial build.

I have double checked CleanWebpackPlugin documentation, still cannot figure out why it deleting my .tmp folder every time I make changes my code.

Webpack Config

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports.webpack = {
  /***************************************************************************
   *                                                                          *
   * Create one item in the `entry` dictionary for each page in your app.     *
   *                                                                          *
   ***************************************************************************/
  entry: {
    homepage: './assets/js/homepage.js',
    index: './assets/app/index.js'
  },

  /***************************************************************************
   *                                                                          *
   * Output bundled .js files with a `.bundle.js` extension into              *
   * the `.tmp/public/js` directory                                           *
   *                                                                          *
   ***************************************************************************/
  output: {
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, '..', '.tmp', 'public')
  },

  /***************************************************************************
   *                                                                          *
   * Set up a couple of rules for processing .css and .less files. These will *
   * be extracted into their own bundles when they're imported in a           *
   * JavaScript file.                                                         *
   *                                                                          *
   ***************************************************************************/
  module: {
    rules: [
      // Extract less files
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ use: 'css-loader' })
      },
      // Extract less files
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({ use: 'css-loader!less-loader' })
      },
      {
        test: /\.js?/,
        include: path.resolve(__dirname, '..', 'assets', 'app'),
        loader: 'babel-loader',
        options: {
          presets: ['react', 'env', 'stage-2']
        }
      }
    ]
  },

  /***************************************************************************
   *                                                                          *
   * Set up some plugins to help with Sails development using Webpack.        *
   *                                                                          *
   ***************************************************************************/
  plugins: [
    new ExtractTextPlugin('styles/[name].bundle.css'),

    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '..', '.tmp')],
      verbose: true,
      dry: false
    }),

    new CopyWebpackPlugin([
      {
        from: './assets/images',
        to: path.resolve(__dirname, '..', '.tmp', 'public', 'images')
      },
      {
        from: './assets/fonts',
        to: path.resolve(__dirname, '..', '.tmp', 'public', 'fonts')
      },
      {
        from: './assets/styles',
        to: path.resolve(__dirname, '..', '.tmp', 'public', 'styles')
      },
      {
        from: './assets/js/raw',
        to: path.resolve(__dirname, '..', '.tmp', 'public', 'js')
      }
    ])
  ]
};

Environment

 System:
    OS: Linux 4.4 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64        Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz
    Memory: 10.00 GB / 19.96 GB
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 8.10.0 - /usr/bin/node
    npm: 3.5.2 - /usr/bin/npm
  npmPackages:
    clean-webpack-plugin: 2.0.1 => 2.0.1
    webpack: 3.10.0 => 3.10.0
chrisblossom commented 5 years ago

Could you provide a minimal reproducible repository?

alexanderdevm commented 5 years ago

Sure, I have updated sails-webpack-seed project with webpack v3 and clean webpack plugin v2 for easy issue reproduction:

Installation:

git clone https://github.com/alexanderdevm/sails_webpack_clean_webpack_plugin_2.git
cd sails_webpack_clean_webpack_plugin_2
npm install sails -g
npm install
sails lift

If everything went well you should see message similar to this:

info: Starting app...

clean-webpack-plugin: removed .tmp
 info:
 info:                .-..-.
 info:
 info:    Sails              <|    .-..-.
 info:    v1.1.0              |\
 info:                       /|.\
 info:                      / || \
 info:                    ,'  |'  \
 info:                 .-'.-==|/_--'
 info:                 `--'-------'
 info:    __---___--___---___--___---___--___
 info:  ____---___--___---___--___---___--___-__
 info:
 info: Server lifted in `/path/...`
 info: To shut down Sails, press <CTRL> + C at any time.
 info: Read more at https://sailsjs.com/support.

debug: -------------------------------------------------------
debug: :: Wed Mar 27 2019 00:03:58 GMT-0400 (DST)

debug: Environment : development
debug: Port        : 1337
debug: -------------------------------------------------------

Issue reproduction steps:

  1. While keeping this terminal up, open a new terminal:

  2. vi assets/js/homepage.js

  3. change anything and save.

  4. Look at the previous terminal window.

  5. The issue reproduction is successful when the following message will be appended to console:

    clean-webpack-plugin: removed .tmp/public/fonts/.gitkeep
    clean-webpack-plugin: removed .tmp/public/images/.gitkeep
  6. The full log will look like this:

    
    info: Starting app...

clean-webpack-plugin: removed .tmp info: info: .-..-. info: info: Sails <| .-..-. info: v1.1.0 |\ info: /|.\ info: / || \ info: ,' |' \ info: .-'.-==|/--' info: `--'-------' info: --------------- info: ____---------------_- info: info: Server lifted in /path/... info: To shut down Sails, press + C at any time. info: Read more at https://sailsjs.com/support.

debug: ------------------------------------------------------- debug: :: Wed Mar 27 2019 00:03:58 GMT-0400 (DST)

debug: Environment : development debug: Port : 1337 debug: ------------------------------------------------------- clean-webpack-plugin: removed .tmp/public/fonts/.gitkeep clean-webpack-plugin: removed .tmp/public/images/.gitkeep



Previous behavior:
- clean-webpack-plugin v0.x wiped `.tmp` folder on build ( initial start of the application )

Current behavior:
- clean-webpack-plugin v2.0.1 wipes `.tmp` folder on build and on the first save of files within `assets/` folder.

Expected behaviour:
-  clean-webpack-plugin v2.0.1 should only wipe `.tmp` folder on build ( initial start of the application ) only as v0.x did.
chrisblossom commented 5 years ago

Thanks for the repo!

This is happening because copy-webpack-plugin (see copy-webpack-plugin/pull/360) temporarily adds assets to the webpack asset list.

The code below will fix the issue.

    new CleanWebpackPlugin( {
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '..', '.tmp')],
      cleanAfterEveryBuildPatterns: ['!images/**/*', '!fonts/**/*'],
      verbose: true,
      dry: false
    }),
alexanderdevm commented 5 years ago

Thank you, I have apply the suggested fix to the project and the issue is how resolved.