Update webpacker and replace vue with react

config/initializers/browser.rb

@@ -1,4 +1,4 @@
-# See .babelrc
+# See .browserslistrc
 Browser.modern_rules.clear
 Browser.modern_rules << -> b { b.chrome? && b.version.to_i >= 50 }
 Browser.modern_rules << -> b { b.ie? && b.version.to_i >= 11 && !b.compatibility_view? }

config/webpack/environment.js

@@ -1,7 +1,5 @@
 const path = require('path');
 const { environment } = require('@rails/webpacker');
-const { VueLoaderPlugin } = require('vue-loader');
-const vue = require('./loaders/vue');
 
 const resolve = {
   alias: {
@@ -10,7 +8,4 @@ const resolve = {
 };
 
 environment.config.merge({ resolve });
-
-environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin());
-environment.loaders.append('vue', vue);
 module.exports = environment;

config/webpack/loaders/vue.js

@@ -1,8 +0,0 @@
-module.exports = {
-  test: /\.vue(\.erb)?$/,
-  use: [
-    {
-      loader: 'vue-loader'
-    }
-  ]
-};

config/webpacker.yml

@@ -3,8 +3,11 @@
 default: &default
   source_path: app/javascript
   source_entry_path: packs
+  public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: false
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -13,8 +16,25 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
-    - .vue
+    - .mjs
     - .js
     - .sass
     - .scss
@@ -32,6 +52,9 @@ development:
   <<: *default
   compile: true
 
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -49,7 +72,7 @@ development:
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
-      ignored: /node_modules/
+      ignored: '**/node_modules/**'
 
 
 test:
@@ -65,5 +88,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true