cornerstone icon indicating copy to clipboard operation
cornerstone copied to clipboard

Published 20 hours ago • verified publisher icon bigcommerce

CleanWebpackPlugin not removing stale assets in dist folder

Open sacr3dc0w opened this issue 2 years ago • 5 comments

The code for our stores runs a lot of custom JavaScript and theme modifications. Since the 6.8.0 release (more specifically #2311), we were getting the TR-302 / 2500+ files, which meant pushing updates halted. We initially found a solution: delete assets/dist and node_modules, then reinstall and push the theme. I began to wonder why that was the solution, and if the assets/dist folder wasn't pruning stale files from between development and productions. Upon further investigation, I discovered the potential problem and have a possible solution.

Expected behavior

CleanWebpackPlugin removes files in the output.path directory and outputs new ones.

Actual behavior

New files are generated, but the old ones remain.

Steps to reproduce the behavior

Make sure Cornerstone is up-to-date (6.8.0)

Run stencil start, close that instance, then run stencil bundle.

User Notes / Suggested Solution

I believe this is due to the cleanOnceBeforeBuildPatterns setting: https://github.com/bigcommerce/cornerstone/blob/e400137638c254ad911ff667ba27cc61d7ecc278/webpack.common.js#L61

Unless I'm misunderstanding, that setting doesn't appear to be necessary. From https://github.com/johnagan/clean-webpack-plugin/issues/106

All files inside webpack's output.path directory will be removed, but the directory itself will not be.

Below is an output from assets/dist with the settings as they are currently after I run stencil start. Looks normal. Scroll below to see the list of when stencil bundle is run after killing the local instance.

BEFORE

  • report.html
  • theme-bundle.chunk.assets_js_theme_account_js.js
  • theme-bundle.chunk.assets_js_theme_auth_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.assets_js_theme_brand_js.js
  • theme-bundle.chunk.assets_js_theme_cart_js.js
  • theme-bundle.chunk.assets_js_theme_catalog_js-assets_js_theme_common_faceted-search_js-assets_js_theme_global_co-3f5afe.js
  • theme-bundle.chunk.assets_js_theme_category_js.js
  • theme-bundle.chunk.assets_js_theme_common_form-validation_js-assets_js_theme_common_state-country_js.js
  • theme-bundle.chunk.assets_js_theme_compare_js.js
  • theme-bundle.chunk.assets_js_theme_contact-us_js.js
  • theme-bundle.chunk.assets_js_theme_gift-certificate_js.js
  • theme-bundle.chunk.assets_js_theme_product_js.js
  • theme-bundle.chunk.assets_js_theme_search_js.js
  • theme-bundle.chunk.vendors-node_modules_creditcards_index_js-node_modules_lodash_find_js-node_modules_lodash_red-3372e4.js
  • theme-bundle.chunk.vendors-node_modules_jstree_dist_jstree_min_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_bind_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_union_js-node_modules_lodash_without_js-node_modules_url_url_js.js
  • theme-bundle.font.js
  • theme-bundle.head_async.js
  • theme-bundle.main.js
  • theme-bundle.polyfills.js

AFTER

  • report.html
  • theme-bundle.chunk.110.js
  • theme-bundle.chunk.110.js.map
  • theme-bundle.chunk.234.js
  • theme-bundle.chunk.234.js.map
  • theme-bundle.chunk.300.js
  • theme-bundle.chunk.300.js.map
  • theme-bundle.chunk.443.js
  • theme-bundle.chunk.443.js.map
  • theme-bundle.chunk.444.js
  • theme-bundle.chunk.444.js.map
  • theme-bundle.chunk.548.js
  • theme-bundle.chunk.548.js.map
  • theme-bundle.chunk.634.js
  • theme-bundle.chunk.634.js.map
  • theme-bundle.chunk.647.js
  • theme-bundle.chunk.647.js.LICENSE.txt
  • theme-bundle.chunk.647.js.map
  • theme-bundle.chunk.651.js
  • theme-bundle.chunk.651.js.map
  • theme-bundle.chunk.743.js
  • theme-bundle.chunk.743.js.LICENSE.txt
  • theme-bundle.chunk.743.js.map
  • theme-bundle.chunk.802.js
  • theme-bundle.chunk.802.js.map
  • theme-bundle.chunk.847.js
  • theme-bundle.chunk.847.js.map
  • theme-bundle.chunk.966.js
  • theme-bundle.chunk.966.js.LICENSE.txt
  • theme-bundle.chunk.966.js.map
  • theme-bundle.chunk.assets_js_theme_account_js.js
  • theme-bundle.chunk.assets_js_theme_auth_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.assets_js_theme_brand_js.js
  • theme-bundle.chunk.assets_js_theme_cart_js.js
  • theme-bundle.chunk.assets_js_theme_catalog_js-assets_js_theme_common_faceted-search_js-assets_js_theme_global_co-3f5afe.js
  • theme-bundle.chunk.assets_js_theme_category_js.js
  • theme-bundle.chunk.assets_js_theme_common_form-validation_js-assets_js_theme_common_state-country_js.js
  • theme-bundle.chunk.assets_js_theme_compare_js.js
  • theme-bundle.chunk.assets_js_theme_contact-us_js.js
  • theme-bundle.chunk.assets_js_theme_gift-certificate_js.js
  • theme-bundle.chunk.assets_js_theme_product_js.js
  • theme-bundle.chunk.assets_js_theme_search_js.js
  • theme-bundle.chunk.vendors-node_modules_creditcards_index_js-node_modules_lodash_find_js-node_modules_lodash_red-3372e4.js
  • theme-bundle.chunk.vendors-node_modules_jstree_dist_jstree_min_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_bind_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_union_js-node_modules_lodash_without_js-node_modules_url_url_js.js
  • theme-bundle.font.js
  • theme-bundle.font.js.map
  • theme-bundle.head_async.js
  • theme-bundle.head_async.js.map
  • theme-bundle.main.js
  • theme-bundle.main.js.LICENSE.txt
  • theme-bundle.main.js.map
  • theme-bundle.polyfills.js
  • theme-bundle.polyfills.js.LICENSE.txt
  • theme-bundle.polyfills.js.map

Now if we remove line 61 entirely, stale files are removed. https://github.com/bigcommerce/cornerstone/blob/e400137638c254ad911ff667ba27cc61d7ecc278/webpack.common.js#L61

BEFORE

  • report.html
  • theme-bundle.chunk.assets_js_theme_account_js.js
  • theme-bundle.chunk.assets_js_theme_auth_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.assets_js_theme_brand_js.js
  • theme-bundle.chunk.assets_js_theme_cart_js.js
  • theme-bundle.chunk.assets_js_theme_catalog_js-assets_js_theme_common_faceted-search_js-assets_js_theme_global_co-3f5afe.js
  • theme-bundle.chunk.assets_js_theme_category_js.js
  • theme-bundle.chunk.assets_js_theme_common_form-validation_js-assets_js_theme_common_state-country_js.js
  • theme-bundle.chunk.assets_js_theme_compare_js.js
  • theme-bundle.chunk.assets_js_theme_contact-us_js.js
  • theme-bundle.chunk.assets_js_theme_gift-certificate_js.js
  • theme-bundle.chunk.assets_js_theme_product_js.js
  • theme-bundle.chunk.assets_js_theme_search_js.js
  • theme-bundle.chunk.vendors-node_modules_creditcards_index_js-node_modules_lodash_find_js-node_modules_lodash_red-3372e4.js
  • theme-bundle.chunk.vendors-node_modules_jstree_dist_jstree_min_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_bind_js-node_modules_lodash_transform_js.js
  • theme-bundle.chunk.vendors-node_modules_lodash_union_js-node_modules_lodash_without_js-node_modules_url_url_js.js
  • theme-bundle.font.js
  • theme-bundle.head_async.js
  • theme-bundle.main.js
  • theme-bundle.polyfills.js

AFTER

  • report.html
  • theme-bundle.chunk.110.js
  • theme-bundle.chunk.110.js.map
  • theme-bundle.chunk.234.js
  • theme-bundle.chunk.234.js.map
  • theme-bundle.chunk.300.js
  • theme-bundle.chunk.300.js.map
  • theme-bundle.chunk.443.js
  • theme-bundle.chunk.443.js.map
  • theme-bundle.chunk.444.js
  • theme-bundle.chunk.444.js.map
  • theme-bundle.chunk.548.js
  • theme-bundle.chunk.548.js.map
  • theme-bundle.chunk.634.js
  • theme-bundle.chunk.634.js.map
  • theme-bundle.chunk.647.js
  • theme-bundle.chunk.647.js.LICENSE.txt
  • theme-bundle.chunk.647.js.map
  • theme-bundle.chunk.651.js
  • theme-bundle.chunk.651.js.map
  • theme-bundle.chunk.743.js
  • theme-bundle.chunk.743.js.LICENSE.txt
  • theme-bundle.chunk.743.js.map
  • theme-bundle.chunk.802.js
  • theme-bundle.chunk.802.js.map
  • theme-bundle.chunk.847.js
  • theme-bundle.chunk.847.js.map
  • theme-bundle.chunk.966.js
  • theme-bundle.chunk.966.js.LICENSE.txt
  • theme-bundle.chunk.966.js.map
  • theme-bundle.font.js
  • theme-bundle.font.js.map
  • theme-bundle.head_async.js
  • theme-bundle.head_async.js.map
  • theme-bundle.main.js
  • theme-bundle.main.js.LICENSE.txt
  • theme-bundle.main.js.map
  • theme-bundle.polyfills.js
  • theme-bundle.polyfills.js.LICENSE.txt
  • theme-bundle.polyfills.js.map

sacr3dc0w avatar Jan 27 '23 22:01 sacr3dc0w

hi @sacr3dc0w , thanks. are you going to create PR for this? cc @jairo-bc

BC-krasnoshapka avatar Feb 06 '23 11:02 BC-krasnoshapka

After making changes to our .js files, we noticed the changes were not being reflected in localhost or being pushed to our live site. We removed line 61 from webpack.common.js, and this did not fix the issue even n after a stencil bundle. Is there anything else we need to do to resolve this?

dadameck avatar Feb 06 '23 20:02 dadameck

Steps on what to do after deleting line 61 would be much appreciated! Simply deleting the line isn't allowing for changes to js files to appear in local.

PSCPeter avatar Feb 07 '23 12:02 PSCPeter

Upon further inspection and testing we discovered the following. We removed cleanOnceBeforeBuildPatterns: ['assets/dist'], and then removed our node_modules and dist folders. Upon runing npm install with this line now removed, when you stencil start, dist is not automatically created, after running stencil bundle dist is created. In order for js file changes to reflect you need to run stencil bundle again to see your changes and then start back up localhost. The root of the problem seems to be that Webpack Bundle Analyzer does not trigger on stencil start or on saving of a js file, so dist never gets updated causing the js to reflect as well. Is there going to be a further fix than just removing that line to get the functionality back similar to 6.7.0? Starting and stopping localhost to bundle is not ideal.

PSCPeter avatar Feb 07 '23 19:02 PSCPeter

We can consider removing clean-webpack-plugin and use output.clean = true https://github.com/johnagan/clean-webpack-plugin/issues/197

BC-krasnoshapka avatar Feb 09 '23 11:02 BC-krasnoshapka