Support HTMLWebpackPlugin with Rspack 1.0

Applelo · Aug 29, 2024 · 4a699ec · 4a699ec
1 parent fa65924
commit 4a699ec
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 128 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ This plugin adds preload links by getting output assets from the build tools you
 Supporting:
 - Vite 4 and 5 **(on build only)**
 - Webpack 5 (with [HtmlWebpackPlugin 5](https://github.com/jantimon/html-webpack-plugin))
-- Rspack (with [HtmlWebpackPlugin 5](https://github.com/jantimon/html-webpack-plugin) or [HtmlRspackPlugin](https://www.rspack.dev/config/plugins.html#htmlrspackplugin))
+- Rspack 1.0 (with [HtmlWebpackPlugin 5](https://github.com/jantimon/html-webpack-plugin) or [HtmlRspackPlugin](https://www.rspack.dev/config/plugins.html#htmlrspackplugin))
 
 > [!NOTE]
 > This plugin combines [vite-plugin-inject-preload](https://github.com/Applelo/vite-plugin-inject-preload) and [html-webpack-inject-preload](https://github.com/principalstudio/html-webpack-inject-preload) into one package.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "unplugin-inject-preload",
   "type": "module",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "packageManager": "pnpm@9.9.0",
   "description": "Inject <link rel='preload'> for Webpack/ViteJS",
   "license": "MIT",
@@ -93,7 +93,7 @@
     "webpack-sources": "^3.2.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.27.3",
+    "@antfu/eslint-config": "3.0.0",
     "@rspack/core": "^1.0.0",
     "@types/mime-types": "^2.1.4",
     "@types/node": "^22.5.1",

diff --git a/playground/rspack/rspack.config.js b/playground/rspack/rspack.config.js
@@ -1,18 +1,22 @@
-const rspack = require('@rspack/core')
-const UnpluginInjectPreload = require('unplugin-inject-preload/rspack').default
-// const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('node:path')
+// const rspack = require('@rspack/core')
+const UnpluginInjectPreload = require('unplugin-inject-preload/rspack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 /** @type {import('@rspack/cli').Configuration} */
 const config = {
   context: __dirname,
   entry: './../src/main.ts',
   output: {
-    publicPath: 'dist',
+    publicPath: path.join(__dirname, 'dist'),
     filename: 'main.js',
-    path: 'dist',
+    path: path.join(__dirname, 'dist'),
     clean: true,
     assetModuleFilename: '[name].[hash][ext][query]',
   },
+  experiments: {
+    css: true,
+  },
   module: {
     rules: [
       {
@@ -23,39 +27,57 @@ const config = {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
+      {
+        test: /\.ts$/,
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
     ],
   },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    extensionAlias: {
+      '.js': ['.js', '.ts'],
+    },
+  },
   plugins: [
-    new rspack.HtmlRspackPlugin({
-      minify: false,
-      templateContent: `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <!--__unplugin-inject-preload__-->
-        </head>
-        <body>
-          <h1>Hello World</h1>
-        </body>
-      </html>`,
-    }),
-    // new HtmlWebpackPlugin({
-    //   inject: false,
+    // new rspack.HtmlRspackPlugin({
     //   minify: false,
-    //   templateContent: ({ htmlWebpackPlugin }) => `
+    //   templateContent: `
     //   <!DOCTYPE html>
     //   <html>
     //     <head>
     //       <!--__unplugin-inject-preload__-->
-    //       ${htmlWebpackPlugin.tags.headTags}
     //     </head>
     //     <body>
     //       <h1>Hello World</h1>
-    //       ${htmlWebpackPlugin.tags.bodyTags}
     //     </body>
-    //   </html>
-    // `,
+    //   </html>`,
     // }),
+    new HtmlWebpackPlugin({
+      inject: false,
+      minify: false,
+      templateContent: ({ htmlWebpackPlugin }) => `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <!--__unplugin-inject-preload__-->
+          ${htmlWebpackPlugin.tags.headTags}
+        </head>
+        <body>
+          <h1>Hello World</h1>
+          ${htmlWebpackPlugin.tags.bodyTags}
+        </body>
+      </html>
+    `,
+    }),
     UnpluginInjectPreload({
       injectTo: 'custom',
       files: [

diff --git a/playground/webpack/webpack.config.js b/playground/webpack/webpack.config.js
@@ -1,7 +1,7 @@
 const path = require('node:path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const UnpluginInjectPreload = require('unplugin-inject-preload/webpack').default
+const UnpluginInjectPreload = require('unplugin-inject-preload/webpack')
 
 module.exports = {
   entry: path.resolve(__dirname, './../src/main.ts'),