Webpack 不加载“资产/资源”类型

Posted

技术标签:

【中文标题】Webpack 不加载“资产/资源”类型【英文标题】:Webpack does not load "asset/resource" type 【发布时间】:2021-06-01 07:18:49 【问题描述】:

我一直在尝试在电子锻造应用程序中使用 Webpack 来加载资产(特别是图像),但我没有成功。

主要问题是,当我使用带有“资产/资源”作为类型的 png 示例规则时,应用程序将无法运行并引发错误。

我的规则如下:

module.exports = [
  // Add support for native node modules
  
    test: /\.node$/,
    use: 'node-loader',
  ,
  
    test: /\.(m?js|node)$/,
    parser:  amd: false ,
    use: 
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: 
        outputAssetBase: 'native_modules',
      ,
    ,
  ,
  
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: 
      loader: 'ts-loader',
      options: 
        transpileOnly: true
      
    
  ,
  
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource'
  
];

抛出的错误如下:

An unhandled error has occurred inside Forge:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[3].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[3].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
    at webpack (C:\Users\Iscle\Documents\Work\TFG\gestishop-forge\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\webpack.js:31:9)
    at C:\Users\Iscle\Documents\Work\TFG\gestishop-forge\node_modules\@electron-forge\plugin-webpack\src\WebpackPlugin.ts:236:26
    at new Promise (<anonymous>)
    at C:\Users\Iscle\Documents\Work\TFG\gestishop-forge\node_modules\@electron-forge\plugin-webpack\src\WebpackPlugin.ts:235:13
error Command failed with exit code 1.

我搜索了类似的错误,但没有出现任何问题。该规则直接从官方文档(https://webpack.js.org/guides/asset-modules/)复制而来。使用的 webpack 版本是目前可用的最新版本。

我现在没有想法,也许有更多经验的人可以发光。

谢谢!

【问题讨论】:

你应该检查这个 npm 包,copy-webpack-plugin,我用它来处理资产...省去了我设置规则和复制的痛苦... 【参考方案1】:

确保您使用以下方式安装了最新版本的 webpack:

npm: npm install webpack@latest

Yarn: yarn add webpack@latest

您目前可能使用的是第 4 版,截至本文,默认下载(至少在 npm 上)似乎是第 4 版。刚才对我有帮助,希望对你有帮助!

https://webpack.js.org/migrate/5/

【讨论】:

以上是关于Webpack 不加载“资产/资源”类型的主要内容,如果未能解决你的问题,请参考以下文章

webpack

webpack第一节

前端模块化开发篇之grunt&webpack篇

Webpack2 不理解我的 SASS 文件中的 @import 语句(如何使用 webpack2 编译 SASS?)

webpack安装步骤及文件

又到金三银四,还敢不重视 Webpack 打包原理吗?