Merge pull request #4982 from TheTrio/develop

Transition to webpack 5

app/assets/stylesheets/survey_modules/question-types.styl

@@ -36,7 +36,7 @@
 
 .question-type--select .survey__question-text:after
   content ''
-  background url('/assets/chosen-sprite.png') no-repeat
+  background url('../images/chosen-sprite.png') no-repeat
   position absolute
   left 130px
   z-index 5
@@ -241,7 +241,7 @@
   line-height 28px
   font-weight 600
   font-size 15px
-  background-image url('/assets/images/uiSlider-Handle-Background.png')
+  background-image url('../images/uiSlider-Handle-Background.png')
   background-repeat no-repeat
   background-position center
   background-size contain

app/assets/stylesheets/survey_modules/vendor/chosen.css

@@ -103,7 +103,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   display: block;
   width: 12px;
   height: 12px;
-  background: url('/assets/images/chosen-sprite.png') -42px 1px no-repeat;
+  background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
   font-size: 1px;
 }
 .chosen-container-single .chosen-single abbr:hover {
@@ -124,7 +124,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   display: block;
   width: 100%;
   height: 100%;
-  background: url('/assets/images/chosen-sprite.png') no-repeat -2px 10px;
+  background: url('../images/chosen-sprite.png') no-repeat -2px 10px;
   background-size: 56px 41px;
 }
 .chosen-container-single .chosen-search {
@@ -141,8 +141,8 @@ This file is generated by `grunt build`, do not edit it by hand.
   height: auto;
   outline: 0;
   border: 1px solid #aaa;
-  background: white url('/assets/images/chosen-sprite.png') no-repeat 100% -20px;
-  background: url('/assets/images/chosen-sprite.png') no-repeat 100% -20px;
+  background: white url('../images/chosen-sprite.png') no-repeat 100% -20px;
+  background: url('../images/chosen-sprite.png') no-repeat 100% -20px;
   font-size: 1em;
   font-family: sans-serif;
   line-height: normal;
@@ -287,7 +287,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   display: block;
   width: 12px;
   height: 12px;
-  background: url('/assets/images/chosen-sprite.png') -42px 1px no-repeat;
+  background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
   font-size: 1px;
 }
 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
@@ -424,8 +424,8 @@ This file is generated by `grunt build`, do not edit it by hand.
 }
 .chosen-rtl .chosen-search input[type="text"] {
   padding: 4px 5px 4px 20px;
-  background: white url('/assets/images/chosen-sprite.png') no-repeat -30px -20px;
-  background: url('/assets/images/chosen-sprite.png') no-repeat -30px -20px;
+  background: white url('../images/chosen-sprite.png') no-repeat -30px -20px;
+  background: url('../images/chosen-sprite.png') no-repeat -30px -20px;
   direction: rtl;
 }
 .chosen-rtl.chosen-container-single .chosen-single div b {
@@ -445,7 +445,7 @@ This file is generated by `grunt build`, do not edit it by hand.
   .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
   .chosen-container .chosen-results-scroll-down span,
   .chosen-container .chosen-results-scroll-up span {
-    background-image: url('/assets/images/[email protected]') !important;
+    background-image: url('../images/[email protected]') !important;
     background-size: 56px 41px !important;
     background-repeat: no-repeat !important;
   }

app/helpers/application_helper.rb

@@ -42,13 +42,13 @@ def hot_javascript_path(filename)
   end
 
   def fingerprinted(path, filename, file_prefix = nil)
-    manifest_path = "#{Rails.root}/public/#{path}/js-manifest.json"
+    manifest_path = "#{Rails.root}/public/#{path}/manifest.json"
     manifest = Oj.load(File.read(File.expand_path(manifest_path, __FILE__)))
     "#{file_prefix}#{manifest[filename + '.js']}"
   end
 
   def css_fingerprinted(filename, file_prefix = '')
-    manifest_path = "#{Rails.root}/public/assets/javascripts/css-manifest.json"
+    manifest_path = "#{Rails.root}/public/assets/javascripts/manifest.json"
     manifest = Oj.load(File.read(File.expand_path(manifest_path, __FILE__)))
     "/assets/stylesheets/#{manifest[file_prefix + filename + '.css'].split('/').last}"
   end

lib/tasks/coverage.rake

@@ -14,7 +14,7 @@ namespace :generate do
       funs.each do |fun|
         counter += 1
         text = text.sub(fun, "*/module_#{counter}") # Replaces the function with module_{number}
-        fun = fun.gsub(%r/\/[*]{3}\/ \(function/, "var module_#{counter} = (function")
+        fun = fun.gsub(%r/\/[*]{3}\/ \(/, "var module_#{counter} = (")
         # The above names the individual modules in the format module_{number}
         filename = File
                    .basename(fun.scan(/![*]{3}(.*)[*]{3}!/).second.first.squish, '.*')

package.json

@@ -25,7 +25,8 @@
     "core-js": "^3.21.1",
     "create-react-class": "^15.7.0",
     "cross-fetch": "^3.1.5",
-    "css-loader": "^3.5.3",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "deep-freeze": "^0.0.1",
     "del": "^6.0.0",
     "enzyme": "^3.11.0",
@@ -47,11 +48,11 @@
     "list.js": "git+https://github.com/WikiEducationFoundation/list.js.git",
     "location-origin": "^1.1.4",
     "lodash-es": "^4.17.15",
-    "lodash-webpack-plugin": "^0.11.5",
+    "lodash-webpack-plugin": "^0.11.6",
     "markdown-it": "^12.3.2",
     "markdown-it-footnote": "^3.0.2",
     "merge-stream": "^2.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "mkdirp": "^1.0.4",
     "moment": "2.29.3",
     "moment-locales-webpack-plugin": "^1.2.0",
@@ -87,6 +88,7 @@
     "reselect": "^4.0.0",
     "rev-del": "^2.0.0",
     "rewire": "^5.0.0",
+    "rtlcss-webpack-plugin": "^4.0.7",
     "run-sequence": "^2.2.1",
     "rupture": "^0.7.1",
     "should": "^13.2.1",
@@ -102,22 +104,20 @@
     "velocity-animate": "^1.5.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^4.44.1",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-exclude-assets-plugin": "^0.1.1",
-    "webpack-manifest-plugin": "2.2.0",
-    "webpack-rtl-plugin": "^2.0.0",
+    "webpack-dev-server": "^4.9.0",
+    "webpack-manifest-plugin": "^5.0.0",
     "wnumb": "^1.2.0"
   },
   "scripts": {
     "test": "jest",
     "lint-non-build": "eslint 'test/**/*.{jsx,js}' '*.js'",
-    "start": "node prepare.js && parallel-webpack --config=webpack.multi.js -m=0 --watch -- --env.development --env.watch_js",
-    "coverage": "node prepare.js && parallel-webpack --config=webpack.multi.js -m=0 -- --env.development --env.coverage",
-    "hot": "node prepare.js && webpack-dev-server --env.development",
-    "build": "node prepare.js && parallel-webpack --config=webpack.multi.js -m=0 -- --env.production",
-    "analyze": "webpack --env.production --env.stats --profile --json > stats.json && webpack-bundle-analyzer stats.json public/assets/javascripts"
+    "start": "node prepare.js && webpack serve --env development --client-overlay --client-progress --progress",
+    "start:no-lint": "node prepare.js && webpack serve --env development --env DISABLE_ESLINT --client-overlay --client-progress --progress",
+    "coverage": "node prepare.js && webpack build --env development --env coverage --progress",
+    "build": "node prepare.js && webpack build --env production --node-env production --progress",
+    "analyze": "webpack --env production --env stats --profile --json > stats.json && webpack-bundle-analyzer stats.json public/assets/javascripts"
   },
   "engines": {
     "yarn": ">= 1.0.0"
@@ -127,8 +127,7 @@
     "@babel/plugin-transform-runtime": "^7.9.0",
     "babel-plugin-root-import": "^6.5.0",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
-    "eslint-webpack-plugin": "2",
-    "parallel-webpack": "^2.6.0",
+    "eslint-webpack-plugin": "^3.1.1",
     "stylus-native-loader": "^1.1.2",
     "webpack-cli": "^4.9.0"
   },