fix: fix webpack runtime error

baiwusanyu-c · Oct 16, 2024 · 394a1b3 · 394a1b3
1 parent 79c368a
commit 394a1b3
Show file tree

Hide file tree

Showing 8 changed files with 9,798 additions and 5,251 deletions.
diff --git a/packages/core/runtime-mode-build.ts b/packages/core/runtime-mode-build.ts
@@ -7,14 +7,15 @@ import type { PluginOption } from 'vite'
 import type { OutputOptions } from 'rollup'
 
 const unplugin = createUnplugin(
-  (option: CompressOption) => {
+  (option: CompressOption, meta) => {
     setGlobalPrefix('[unplugin-img-compress]:')
     const optionInner = initOption(option)
     if (!optionInner) {
       return {
         name: 'unplugin-img-compress',
       }
     }
+    const ctxWebpack: { dir: string, bundle: IBundle } = { dir: '', bundle: {} }
     return {
       name: 'unplugin-img-compress',
       writeBundle: async(
@@ -24,8 +25,32 @@ const unplugin = createUnplugin(
         log('info', '✨ running...')
         log('info', '✨ 【runtime dev】')
         if (optionInner.runtime === 'build' && optionInner.compressImgBundle) {
-          const outputDir = outputOptions.dir!.replaceAll('\\', '/')
-          optionInner.compressImgBundle(outputDir, optionInner.APIKey, bundle)
+          if (meta.framework !== 'webpack') {
+            const outputDir = outputOptions.dir!.replaceAll('\\', '/')
+            optionInner.compressImgBundle(outputDir, optionInner.APIKey, bundle)
+          } else {
+            optionInner.compressImgBundle(ctxWebpack.dir, optionInner.APIKey, ctxWebpack.bundle)
+          }
+        }
+      },
+      webpack(compiler) {
+        if (optionInner.runtime === 'build' && optionInner.compressImgBundle && meta.framework === 'webpack') {
+          compiler.hooks.emit.tapAsync('ImageAssetsPlugin', (compilation, callback) => {
+            ctxWebpack.dir = (compilation.outputOptions.path || './dist').replaceAll('\\', '/')
+            for (const filename in compilation.assets) {
+              if (/\.(png|jpg|jpeg|gif|svg)$/.test(filename)) {
+                const bundleOrg = compilation.assets[filename]
+                ctxWebpack.bundle[filename] = {
+                  source: bundleOrg.buffer(),
+                  fileName: filename,
+                  type: 'asset',
+                  isAsset: true,
+                  name: undefined,
+                }
+              }
+            }
+            callback()
+          })
         }
       },
     } as UnpluginOptions & { writeBundle?: writeBundle }

diff --git a/play-webpack/package.json b/play-webpack/package.json
@@ -21,7 +21,9 @@
     "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
     "babel-loader": "^9.2.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
+    "url-loader": "^4.1.1",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"

diff --git a/play-webpack/public/home.png b/play-webpack/public/home.png
diff --git a/play-webpack/public/runtime-build-assets/test.png b/play-webpack/public/runtime-build-assets/test.png
diff --git a/play-webpack/public/runtime-build-assets/test2.png b/play-webpack/public/runtime-build-assets/test2.png
diff --git a/play-webpack/src/App.jsx b/play-webpack/src/App.jsx
@@ -1,11 +1,16 @@
 // eslint-disable-next-line no-unused-vars
 import React from 'react'
-
+import Img from '../public/home.png'
+import test2 from '../public/runtime-build-assets/test2.png'
+import test from '../public/runtime-build-assets/test.png'
 const App = () => {
   return (
-        <div>
-            <h1>Hello, React with Webpack!</h1>
-        </div>
+      <div>
+          <img src={Img} />
+          <img src={test2} />
+          <img src={test} />
+          <h1>Hello, React with Webpack!</h1>
+      </div>
   )
 }
 

diff --git a/play-webpack/webpack.config.js b/play-webpack/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-
+const { webpackImgCompress: WebpackImgCompress } = require('../dist/index.cjs')
 module.exports = {
   entry: './src/index.jsx', // 入口文件
   output: {
@@ -16,7 +16,21 @@ module.exports = {
           loader: 'babel-loader',
         },
       },
+      {
+        test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf|otf|webm)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 1000,
+              mimetype: 'image/jpg|image/png|image/ico',
+              fallback: 'file-loader',
+            },
+          },
+        ],
+      },
     ],
+
   },
   resolve: {
     extensions: ['.js', '.jsx'], // 解析的文件后缀
@@ -25,6 +39,12 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './public/index.html', // HTML 模板文件
     }),
+    WebpackImgCompress({
+      APIKey: 'kZgn8pxfdjQjKFmf2StLq7CY4TqMgs0T',
+      dir: '', // runtime = build 时无用，图片直接从钩子里取, 这里直接传空
+      runtime: 'build',
+      mode: 'once',
+    }),
   ],
   devServer: {
     static: './dist', // 开发服务器将文件从 'dist' 目录提供