我遇到了一个众所周知的问题，但是没有明确的解决方案：以下 webpack 设置（encoredownloadable font: rejected by sanitizer ... ，在 Symfony 中）会在 Firefox 和failed to decode downloaded fontEdge 中针对某些（不是全部！）@fontawesome 字体和 IPM Plex Mono产生错误（我通过 npm 安装的）

.addLoader(
    {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: "[name].[ext]",
                    outputPath: "./fonts"
                }
            }
        ]
    })

我已经尝试了在 stackoverflow、github 和其他网站上能找到的所有方法。不是另一个加载器（url-loader），修改outputPath或设置publicPath，也没有任何其他帮助。错误仍然相同。导入一切正常，因为 webpack 没有编译错误。如果没有这部分 webpack 配置，一切都很好。网络服务器正在正确提交文件并访问 URL，因为它直接下载了有效的字体文件。因此，这条道路和其他一切似乎都没有问题。那么...这里出了什么问题？

该问题出现在 Firefox、Chrome 和 Edge（均为最新版本）中。

知道如何解决这个问题吗？

我目前正在从Webpack 1升级到2，然后再升级到3。在此升级中，我遵循了1 => 2和2 => 3的迁移说明。

我遇到的问题是node_modules我内部的代码中似乎没有任何已解决的安装包得到解决client/app/bundles。我为所有node_modules得到的错误都在以下结构中：

./node_modules/alt/lib/store/StoreMixin.js ||中的错误 找不到模块：错误：无法解析“ client / node_modules / alt / lib / store”中的“传送器”

我的理论是，在某个地方我对，或版本不匹配file-loader，因为如果没有适当的版本，就无法导入模块，这是有道理的。我确保所有具有以模式结尾的加载程序。也成功而没有错误。expose-loaderimports-loadermodule.rules-loaderyarn install

我的依赖项和Webpack配置如下：

Package.json

"dependencies": {
    "ajv": "^5.1.5",
    "alt": "^0.17.8",
    "alt-container": "^1.0.2",
    "autoprefixer": "^6.4.0",
    "axios": "^0.7.0",
    "babel-cli": "^6.10.1",
    "babel-core": "^6.3.26",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-decorators": "^6.3.13",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-types": "^6.4.5",
    "body-parser": "^1.14.1",
    "chai": "^3.4.1",
    "chai-enzyme": "^0.6.1",
    "css-loader": "^0.23.1",
    "enzyme": "^2.5.0",
    "es5-shim": "^4.1.14", …

我有一个具有多个配置的项目。第一个配置是config.dev.js包含一些开发配置的文件。我在开发模式下使用它。第二个配置是config.js文件。我在生产模式下使用它。

在我使用导入的代码中：

import * as config from './config.js';

我想在开发中使用第一个配置文件，而在不重写所有导入的情况下在生产中使用第二个。如何根据构建模式替换此配置？

作为一个有趣的项目，我正在制作一个用于创建原生 Web 组件的“框架”。我创建了一个 webpack 加载器，它解析自定义.comp文件中的一些 XML并导出一个 es2015 类。不幸的是，我找不到.comp在我的打字稿文件中导入这些文件的方法。

我试过在一个普通的 javascript 文件中导入我的自定义文件，一切都按预期工作；我可以看到我创建的加载器正在运行，并且得到了预期的输出。但是当我尝试导入打字稿文件时，我只是收到错误Cannot find module 'test/test.comp'。我尝试创建一个空的声明文件并注意到错误消息更改为File '[path]/test/test.d.ts' is not a module

这是我的 webpack 配置：

mode: 'development',
watch: true,
entry: './test/main.js',
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
},
module: {
    rules: [
        {
            test: /\.ts/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.comp/,
            use: path.resolve(__dirname, 'core/compose-loader.js'),
            exclude: /node_modules/
        }
    ]
},
resolve: {
    extensions: ['.js', '.ts', '.comp'],
    alias: {
        'core': path.resolve(__dirname, "core/"),
        'test': path.resolve(__dirname, "test/") …

我有一个包含不同类型依赖项的大项目：js、scss、svg、png 等...我的 webpack 已配置并捆绑了我的代码，我对此很满意。

但是我想获得所有依赖项（包括二进制文件和所有文件格式）的某种哈希值。最重要的是：我不想在此期间构建我的代码。为此，我需要，例如，所有入口点或至少某种依赖关系树中的所有文件的数组。

我尝试使用编译钩子finishModules，但它在编译后完成。还尝试了一些其他的编译器钩子，不记得究竟是哪个。

我尝试编写加载程序，但默认情况下似乎只有高级文件的源代码（如入口点本身）。

我很高兴收到一些方向来解决我的问题。

我有一个简单的自定义 Webpack 加载器，它从.txt文件生成 TypeScript 代码：

txt-loader.js

module.exports = function TxtLoader(txt) {
  console.log(`TxtLoader invoked on ${this.resourcePath} with content ${JSON.stringify(txt)}`)
  if (txt.indexOf('Hello') < 0) {
    throw new Error(`No "Hello" found`)
  }
  return `export const TEXT: string = ${JSON.stringify(txt)}`
}

在现实生活中，我会对输入进行一些解析；在此示例中，我们假设文件必须包含Hello有效的文本。

该加载程序允许我导入文本文件，如下所示：

索引.ts

import { TEXT } from './hello.txt'

console.log(TEXT)

一切都很好，除了一件事：（webpack watch及其表弟webpack serve）。第一个编译很好：

$ /tmp/webpack-loader-repro/node_modules/.bin/webpack watch
TxtLoader invoked on /tmp/webpack-loader-repro/hello.txt with content "Hello world!\n"
asset main.js 250 bytes [compared for emit] [minimized] (name: main)
./index.ts …

如何在webpcak 4中将loader用于mp4视频格式，我尝试这样：

       {
            test: /\.mp4$/,
            use: 'file-loader',
            loader: 'file-loader?name=videos/[name].[ext]',
        },

然后像这样导入

import pressButtonAnimated from './images/pressButtonAnimated.mp4'

但这对我不起作用，并且出现错误 You may need an appropriate loader to handle this file type.

但这是对我有用的，但我不想在每个文件中添加

import pressButtonAnimated from '-!file-loader!./images/pressButtonAnimated.mp4'