标签: webpack-5

我一直在研究这个模块联合示例，其中设置相对简单 - 主机正在使用具有共享反应依赖项的远程模块。在本地运行时，我注意到尽管主机和远程都有相同的react/react-dom版本，但远程的版本始终是下载的版本。

根据我的研究，模块联合似乎会选择共享依赖项的“最佳”版本，但令我惊讶的是，在两者具有相同版本的情况下，将选择远程版本。这个决定是如何做出的？在这种情况下有没有办法强制使用主机的版本？

更新到 Webpack 5 后，我收到此错误：

不应从默认导出模块导入命名导出“版本”（作为“版本”导入）（很快将仅提供默认导出）

超级简单的代码示例：

import { version } from '../package.json';

export const appVersion = version;

这个问题给出了 的解决方案import * as packageInfo from '../../package.json'; version: packageInfo.version,，但这导入了所有 的解决方案package.json，正如答案注释上的一些评论一样，这可能被视为安全风险。

我所需要的只是版本号；如果我必须导入整个内容package.json并可能将其公开给我的用户，那么最好引入代码重复并仅创建和维护两个单独的变量：

1. 中的版本package.json
2. 我的 js 应用程序中的版本

然而，我猜测有一种安全的导入方式，package.json不会让 Webpack 5 抱怨，但我只是不知道。有这样的办法吗？

我有一些 Rust 代码，可以使用wasm-pack和编译为 Web 程序集wasm-bindgen。我想从网络工作集/工作人员调用此代码。整个应用程序最终应该只是一个 *.js 文件，其他所有内容都内联。

这就是我想象的构建过程：

1. 用于wasm-pack将 Rust 代码编译为 *.wasm 和 *.js 绑定（此步骤效果很好）
2. 用于webpack构建一个独立的 *.js 文件，我可以将其作为工作集/工作线程加载。*.wasm 必须包含在此文件中。（这一步失败）
3. 再次使用webpack来构建我的最终应用程序/包，内联步骤 2 中的工作集/工作文件。（此步骤效果很好）

我的问题出在步骤 2 中：我无法将webpack*.wasm 内联到 worklet/worker 文件中。我在我的 webpack 配置中尝试了这个：

entry: {
    worker: {
        import: './src/worker.ts',
        filename: '../lib/worker.js',
    }
},

// ...

module: {
    rules: [
    
        // ...

        {
            test: /\.wasm$/,
            // 1st option: type: 'webassembly/sync',
            // 2nd option: type: 'asset/inline',
        },

        // ...

    ],
},

无论我做什么，webpack …

如题。我正在学习 Webpack 5，我刚刚注意到似乎有一个称为“层”的概念在文档中很少提及（或者我没有找到）。可以在这里找到（顶级字段的介绍entry）：

    personal: {
      // ...
      layer: 'name of layer', // set the layer for an entry point
    },
  },
};

和这里（对于内置插件SplitChunksPlugin）：

splitChunks.cacheGroups.{cacheGroup}.layer

按模块层将模块分配到缓存组。

这两个layers的意思一样吗？如果不是，定义是什么？您能否指出使用它们的优点？（我什至不知道如何使用它......）

我刚刚更新到webpack 5.

这是我的webpack.config.ts：

import * as path from "path";
import * as webpack from "webpack";

const config: webpack.Configuration = {

  mode: "production",

  devtool: false,

  output: {
    filename: "[name].[contenthash:5].js",
    path: path.resolve(__dirname, "public"),
    publicPath: "/"
  },
  
  entry: {
    app: "./src/index.tsx"
  },

  module: {
    rules:[{
      test: /\.(js|jsx|ts|tsx)$/,
      include: path.resolve(__dirname, "src"),
      use: ["babel-loader"]
    }]
  },

  plugins: [
    new HtmlWebpackPlugin({ ... })
  ],

  optimization: {
    moduleIds: "deterministic",
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        defaultVendors: {
          filename: `vendors.[contenthash:5].js`
        }
      } …

是否可以使用 Webpack 5 构建 ES 模块包（使用默认导出），然后在 Node.js ES 模块中使用（导入）该包？

• 这是以下文件的现场演示。

我有以下文件：

|- webpack.config.js
|- package.json
|- /src
  |- index.js

index.js

function util() {
    return "I'm a util!";
}
export default util;

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    experiments: {
        outputModule: true,
    },
};

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  }
}

运行后npm run build，我们得到：

|- webpack.config.js
|- package.json
|- …

我正在为一个小型应用程序创建 webpack5 设置，同时我面临着下面提到的问题。请建议解决方法

问题快照

Module not found: Error: Can't resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src'      
resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src'
  Parsed request is a module
  using description file: C:\Gowtham\micro-frontend-training\products\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Gowtham\micro-frontend-training\products\src\node_modules doesn't exist or is not a directory
      looking for modules in C:\Gowtham\micro-frontend-training\products\node_modules
        single file module
          using description file: C:\Gowtham\micro-frontend-training\products\package.json (relative path: ./node_modules/faker)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Gowtham\micro-frontend-training\products\node_modules\faker is not a file
            .js

文件夹结构 …

我尝试配置 Webpack 5，使其保留图像和字体的资源文件夹结构。

我有以下结构：

- /app
    /assets
        /images
            /topic1
            /topic2
        /fonts

在我的 webpack 配置中，我已经配置了 Assets 模块，如下所示：

{
    test: /\.(png|svg|jpg|jpeg|gif|xml)$/i,
    type: 'asset/resource'
}
...
same for Font files...

如果我运行 Webpack 5 构建，它会默认将资源以dist/平面结构复制到我的文件夹中，例如文件夹下面的图像/topic1会直接复制到dist/my-topic1-img.png但实际上我希望将其放在这里：dist/assets/images/topic1/my-topic1-img.png。

我怎样才能轻松实现这一目标？

我在这里看到了这个文档链接： https: //webpack.js.org/configuration/module/#rulegeneratorfilename。因此，我假设解决方案可能是编写一些自定义filename函数，该函数将根据文件路径动态设置新文件名，包括每个资产的路径元素。

Webpack 5 是否支持这样的开箱即用配置，或者我真的需要为此编写一些自定义函数吗？

感谢您的帮助和投入。

我将 Storybook 与 webpack 5 一起用于一个简单的项目，尽管为 Storybook 自定义了 webpack 配置，但我在 CSS 模块导入方面遇到了挑战。

(2:7) src/stories/header.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";

    at processResult (./node_modules/webpack/lib/NormalModule.js:743:19)
    at ./node_modules/webpack/lib/NormalModule.js:844:5
    at ./node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ./node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/index.js:155:5)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processImmediate (node:internal/timers:437:9)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

我的 main.js 文件如下所示

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: …

我正在使用 webpack 5 的模块联合插件构建一个具有微前端的应用程序。一切都很好，直到我开始将反应挂钩添加到我的远程应用程序中。当时我收到了有关“挂钩使用无效”的错误，即我发现我加载了两个版本的 React，一个来自远程，另一个来自使用远程的应用程序。

shared通过在我的 webpack 配置中将 React 标记为单例的部分添加一个键解决了这个问题ModuleFederationPlugin。现在一切都编译好了并且似乎运行得很好。

然而，webpack 编译器现在向我发出一些恼人的警告。其曰：

No required version specified and unable to automatically determine one. Unable to find required version for "react" in description file (/Users/myComputer/Development/myapp/node_modules/@apollo/client/react/context/package.json). It need to be in dependencies, devDependencies or peerDependencies.

这是我的 webpack 配置（在远程）当前的样子：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')

const deps = require('./package.json').dependencies

module.exports = {
  mode: 'development',
  devServer: { port: 3001 },
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist/',
  },
  module: …