标签: webpack-5

我不知道这里发生了什么事。我使用文件加载器加载应用程序的字体：

{
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'assets/fonts/',
        publicPath: '../fonts/'
      }
    }]
  },

字体也是在我指定的结构中生成的：dist/assets/fonts。 outputPath: 'assets/fonts/'...它似乎工作正常。

但是： Webpack 还会将字体以哈希值作为名称打包到 /dist 下，并将 CSS 文件中的路径设置为这些文件。

@font-face{font-family:"PaulGrotesk";font-style:normal;font-weight:400;src:url(../../d9bc4e30281429c0cddd.eot);

这里发生了什么？如何防止生成附加文件并将其用作路径？

我在用

• 网页包：^5.47.1
• webpack-cli: ^4.7.2

我的 webpack.config：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: './src/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/js/bundle_v1.0.0.js'
  },

  module: {

    rules: [

      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'index'),
        options: {
          presets: …

我正在使用 Angular 14 和 Webpack 版本：^5.58.1。

下面是配置：

webpack.config.js

const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
module.exports = {
  mode: 'development',
  devtool: "source-map",
  entry: {
    main: "./js/main.js",
    mainDrawer: "./js/divdrawer/main.ts",
    polyfills: "./js/divdrawer/polyfills.ts",
    entry: "./js/entry.js",
    thirdpartylibs: "./js/thirdpartylibs.js"
  },
  output: {
    path: path.join(__dirname, "build/"),
    filename: "[name]bundle.js"
  },

module: {
    rules: [
      {
        parser: {
          system: true,
        }
      }
        test : /\.(tsx|ts)$/,
        use: [
               {
                 loader: '@ngtools/webpack',
                 options: {
                     configFile: path.resolve('./js/tsconfig.json')
                    },
               },
        ]
      },
    },

plugins: [
    new webpackPlugin({
      tsconfig: './js/tsconfig.json',
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm5/, …

我有一个弹出的 create-react-app 项目。将其更新到 webpack 5 后，我收到此错误。它在 webpack v4.41.5 上运行良好

node v10.23.0 操作系统：MacOS Catalina 10.15.7

错误：不应从默认导出模块导入命名的导出“版本”（导入为“版本”）（仅默认导出很快可用）

我正在使用以下 webpack 配置：

{ mode: 'production',
  bail: true,
  devtool: 'source-map',
  entry:
   [ '/Users/Homeoffice/Documents/toolbox-frontend-clone2/src/index.js' ],
  output:
   { path: '/Users/Homeoffice/Documents/toolbox-frontend-clone2/build',
     pathinfo: false,
     filename: 'static/js/[name].[contenthash:8].js',
     chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
     publicPath: '/',
     devtoolModuleFilenameTemplate: [Function],
     globalObject: 'this' },
  optimization:
   { minimize: false,
     minimizer: [ [TerserPlugin], [OptimizeCssAssetsWebpackPlugin] ],
     splitChunks: { chunks: 'all', name: false },
     runtimeChunk: { name: [Function: name] } },
  resolve:
   { modules:
      [ 'node_modules',
        '/Users/Homeoffice/Documents/toolbox-frontend-clone2/node_modules' ],
     extensions:
      [ '.web.mjs', '.mjs', …

我们正在开发一个 React 库，最近注意到，当我们想用新的（webpack 5）Create React 应用程序使用它时，它会抛出一个错误。它抱怨这一点：

“重大更改：请求无法解析只是因为它已按照完全指定的方式解析（可能是因为起源是严格的 EcmaScript 模块，例如具有 javascript mimetype 的模块、“.mjs”文件或“.js”文件，其中package.json 包含 '"type": "module"')。"

我设法通过添加来解决这个问题

{
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
}

虽然这对于任何有权访问 webpack 配置的应用程序都适用，但我们希望使我们的库“即插即用”，无需任何弹出或额外设置。我们应该有什么配置才能使消费者的 webpack 解析我们未完全指定的路由？ 代码在github上

从 Webpack 4 迁移到 Webpack 5 时，使用devtool空值时出现错误（仅在生产模式下）。

module.exports = {
    devtool: isProd ? '' : 'source-map',
    // entry: ...
    // output: ...
    // module: ...
}

控制台中的消息：

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

任何想法如何在生产模式下避免源映射？在那里输入什么？

在下一次构建之前，我想删除以前的构建，因为如果我们不删除旧的构建，则可能无法尽快找到一些未生成输出文件的更改。我现在尝试使用此命令来完成这项工作package.json：

"dev": "rm -rf src/bundle && webpack --mode development --config build/webpack.dev.config.js",

但我觉得这种方式对于命令来说可能有点危险rm -rf，有更好的建议吗？

我正在尝试让我相当复杂的整体应用程序与模块联合一起使用。我的 webpack 配置看起来像这样

   plugins: [
    new ModuleFederationPlugin({
        remotes: {
            "mfe1": "mfe1@http://localhost:3000/remoteEntry.js",
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true },
          "@angular/common": { singleton: true, strictVersion: true },
          "@angular/router": { singleton: true, strictVersion: true },
          ...sharedMappings.getDescriptors()
        }
    }),
    sharedMappings.getPlugin(),
  ],

微前端方面的共享是相同的。当我尝试运行该应用程序时，我得到：

错误：共享单例模块@angular/common的版本11.2.1不满足（需要^7.2.0）

在此之前，我收到了类似的错误消息，但针对的是角度/核心。我通过重新运行纱线并修复库根据不同的角度/核心版本产生的所有警告来解决这个问题。

但由于错误 fpr Angular/common 我陷入困境。我不知道如何找出哪个库可能会产生该错误。

我正在尝试提取库中的 css 文件。我已经读过执行此操作的方法是使用 mini-css-extract-plugin。

难道我做错了什么？还有其他方法可以提取我的库的 css 文件吗？

下面我使用https://webpack.js.org/plugins/mini-css-extract-plugin上提供的相同文件创建了一个简单的测试项目

下面的示例在 webpack 5 中失败，但在 webpack 4 中运行良好。

样式.css

body {
  background: green;
}

索引.js

import './style.css';

包.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "src/component.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.5",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './index.js'
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [ …

我按照此文档将我的 webpack v4 升级到 v5 https://webpack.js.org/migrate/5，之后我收到此错误。

TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
    at /home/ec2-user/abhisar/insights-master/frontend/node_modules/html-webpack-plugin/index.js:59:56
    at Hook.eval [as call] (eval at create (/home/ec2-user/abhisar/insights-master/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] (/home/ec2-user/abhisar/insights-master/frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/ec2-user/abhisar/insights-master/frontend/node_modules/webpack/lib/Compil

我可以做什么来解决这个问题？

我正在研究动态仪表板的架构，其中的组件使用 webpack 5 模块联合从不同的远程反应包中提取。我确实有不同的库，这些库在其中一些远程包之间共享。这些包是可摇树的。因此，每个远程捆绑包将具有来自同一包的不同代码。如果我将这些包作为单例共享，当两个具有相同依赖关系的组件在运行时加载到 DOM 时，webpack 是否可以从两个包中合并 lib 代码？或者我们是否有必要在这样的共享库中禁用摇树？（共享库是指 npm 包）