Upgrading to Webpacker 6.x

guillaumebriday · Jul 15, 2021 · 650f39e · 650f39e
1 parent 26ec514
commit 650f39e
Show file tree

Hide file tree

Showing 17 changed files with 1,000 additions and 2,325 deletions.
diff --git a/Gemfile b/Gemfile
@@ -12,7 +12,7 @@ gem 'puma', '~> 5.0'
 # Use SCSS for stylesheets
 gem 'sass-rails', '>= 6'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 5.0'
+gem 'webpacker', '6.0.0.beta.7'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -186,7 +186,7 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (>= 3.0, < 4.0)
-    webpacker (5.4.0)
+    webpacker (6.0.0.beta.7)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -218,7 +218,7 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 4.1.0)
   webdrivers
-  webpacker (~> 5.0)
+  webpacker (= 6.0.0.beta.7)
 
 RUBY VERSION
    ruby 2.7.3p183

diff --git a/app/javascript/channels/consumer.js → app/packs/channels/consumer.js b/app/javascript/channels/consumer.js → app/packs/channels/consumer.js
diff --git a/app/javascript/channels/index.js → app/packs/channels/index.js b/app/javascript/channels/index.js → app/packs/channels/index.js
diff --git a/app/javascript/components/MyVueComponent.vue → app/packs/components/MyVueComponent.vue b/app/javascript/components/MyVueComponent.vue → app/packs/components/MyVueComponent.vue
diff --git a/app/javascript/packs/application.js → app/packs/entrypoints/application.js b/app/javascript/packs/application.js → app/packs/entrypoints/application.js
diff --git a/app/javascript/stylesheets/application.scss → app/packs/stylesheets/application.scss b/app/javascript/stylesheets/application.scss → app/packs/stylesheets/application.scss
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -6,8 +6,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_packs_with_chunks_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
   <body>

diff --git a/babel.config.js b/babel.config.js
diff --git a/config/webpack/base.js b/config/webpack/base.js
@@ -0,0 +1,22 @@
+const { webpackConfig, merge } = require('@rails/webpacker')
+const { VueLoaderPlugin } = require('vue-loader')
+
+module.exports = merge({
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ],
+  resolve: {
+    extensions: ['.css', '.vue'],
+    alias: {
+      vue: 'vue/dist/vue.esm'
+    }
+  }
+}, webpackConfig)
diff --git a/config/webpack/development.js b/config/webpack/development.js
@@ -1,5 +1,3 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
+module.exports = require('./base')
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
diff --git a/config/webpack/production.js b/config/webpack/production.js
@@ -1,13 +1,12 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const { merge } = require('@rails/webpacker')
+const webpackConfig = require('./base')
 
-environment.config.merge({
+module.exports = merge(webpackConfig, {
   resolve: {
     alias: {
       vue: 'vue/dist/vue.min'
     }
   }
 })
-
-module.exports = environment.toWebpackConfig()
diff --git a/config/webpack/test.js b/config/webpack/test.js
@@ -1,5 +1,3 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()
+module.exports = require('./base')
diff --git a/config/webpacker.yml b/config/webpacker.yml
@@ -1,8 +1,8 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
-  source_entry_path: packs
+  source_path: app/packs
+  source_entry_path: entrypoints
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
@@ -18,36 +18,6 @@ default: &default
   # 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:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-    - .vue
-
 development:
   <<: *default
   compile: true

diff --git a/package.json b/package.json
@@ -5,16 +5,31 @@
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
-    "@rails/webpacker": "5.4.0",
+    "@rails/webpacker": "6.0.0-beta.7",
+    "css-loader": "^6.0.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "mini-css-extract-plugin": "^2.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-focus": "^5.0.1",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^6.7.0",
+    "sass": "^1.35.2",
+    "sass-loader": "^12.1.0",
     "turbolinks": "^5.2.0",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.7",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.44.0",
+    "webpack-cli": "^4.7.2"
   },
   "version": "0.1.0",
   "devDependencies": {
     "webpack-dev-server": "^3.11.2"
+  },
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
+    ]
   }
 }