将 QuillJs 与 Webpack 捆绑会导致错误答案

【问题标题】：Bundling QuillJs with Webpack Cause Error将 QuillJs 与 Webpack 捆绑会导致错误
【发布时间】：2020-02-08 03:50:37
【问题描述】：

我正在尝试将 QuillJs 导入我的项目。我一直在关注他们的所有文档，但有错误。我不会错过任何一步。

我使用 npm 进行了安装

npm install quill@1.3.6

然后将导入代码放入我的 main.js 并与 webpack 捆绑

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';

Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});

export default Quill;

但是，我收到以下错误

ERROR in ./node_modules/quill/assets/icons/image.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
|   <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
 @ ./node_modules/quill/ui/icons.js 31:16-52
 @ ./node_modules/quill/themes/snow.js
 @ ./main.js

ERROR in ./node_modules/quill/assets/icons/video.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <rect class="ql-stroke" height="12" width="12" x="3" y="3"></rect>
|   <rect class="ql-fill" height="12" width="1" x="5" y="3"></rect>
 @ ./node_modules/quill/ui/icons.js 48:16-52
 @ ./node_modules/quill/themes/snow.js
 @ ./main.js

目前，您可能需要适当的加载程序来处理此文件类型没有配置加载程序来处理此文件。

我已经安装了所有必需的依赖项

babel-core, babel-loader, babel-preset-es2015, ts-loader, css-loader, typescript, html加载器

但是，我仍然收到错误，不知道为什么。我非常感谢任何答案。这是官方指南 https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

【问题讨论】：

标签： webpack

【解决方案1】：

您需要安装和配置加载器来处理 SVG 文件或其他图像：

npm install file-loader --save-dev

然后，在您的 Webpack 配置中 (webpack.config.js)：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

【讨论】：