Update Webpack 5 loader config

bridgetownrb · Jun 2, 2022 · 569b1f2 · 569b1f2
1 parent b4b23dd
commit 569b1f2
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-## [1.0.0.beta1] — 2022-06-01
+## [1.1.0.beta2] — 2022-06-01
+
+- Update Webpack 5 default config to switch to native asset loaders (no more `file-loader` needed)
+
+## [1.1.0.beta1] — 2022-06-01
 
 - New bundled configurations: Lit, Shoelace, Ruby2JS, Open Props [#553](https://github.com/bridgetownrb/bridgetown/pull/553) ([jaredcwhite](https://github.com/jaredcwhite))
   - NOTE: "frontend component files" (aka `.js`/`.css` files within the `src/_components` folder) will now be ignored by the build process watcher, thus allowing the frontend bundling refresh to trigger a dev reload

diff --git a/bridgetown-core/lib/bridgetown-core/commands/webpack/update.rb b/bridgetown-core/lib/bridgetown-core/commands/webpack/update.rb
@@ -8,7 +8,7 @@
 return if Bridgetown.environment.test?
 
 required_packages = %w(esbuild esbuild-loader css-loader@6.7.1 webpack@5.72.0 webpack-cli@4.9.2 webpack-manifest-plugin@5.0.0)
-redundant_packages = %w(@babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/preset-env babel-loader)
+redundant_packages = %w(@babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/preset-env babel-loader file-loader)
 
 say "Installing required packages"
 run "yarn add -D --tilde #{required_packages.join(" ")}"

diff --git a/bridgetown-core/lib/bridgetown-core/commands/webpack/webpack.defaults.js.erb b/bridgetown-core/lib/bridgetown-core/commands/webpack/webpack.defaults.js.erb
@@ -81,22 +81,18 @@ const cssRules = {
 
 const fontsRule = {
   test: /\.woff2?$|\.ttf$|\.eot$/,
-  loader: "file-loader",
-  options: {
-    name: "[name]-[contenthash].[ext]",
-    outputPath: "../fonts",
-    publicPath: "../fonts",
-  },
+  type: "asset/resource",
+  generator: {
+    filename: "../fonts/[name]-[hash][ext][query]"
+  }
 }
 
 const imagesRule = {
   test: /\.png?$|\.gif$|\.jpg$|\.svg$/,
-  loader: "file-loader",
-  options: {
-    name: "[path][name]-[contenthash].[ext]",
-    outputPath: "../",
-    publicPath: "../",
-  },
+  type: "asset/resource",
+  generator: {
+    filename: "../[path][name]-[hash][ext][query]"
+  }
 }
 
 // Default configuration object

diff --git a/bridgetown-core/lib/bridgetown-core/version.rb b/bridgetown-core/lib/bridgetown-core/version.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Bridgetown
-  VERSION = "1.1.0.beta1"
+  VERSION = "1.1.0.beta2"
   CODE_NAME = "Belmont"
 end
diff --git a/bridgetown-core/lib/site_template/package.json.erb b/bridgetown-core/lib/site_template/package.json.erb
@@ -18,7 +18,6 @@
     "esbuild": "^0.14.39",
     <%- if frontend_bundling_option == "webpack" -%>
     "esbuild-loader": "^2.18.0",
-    "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.6.0",
     <%- else -%>
     "glob": "^8.0.1",