Webpack：如何添加组件？答案

【问题标题】：Webpack: how add component?Webpack：如何添加组件？
【发布时间】：2018-03-13 14:48:15
【问题描述】：

我需要将component（模块）添加到我的configuration。怎么做才对？

我收到此错误：

[1] ERROR in ./node_modules/font-awesome/css/font-awesome.css
[1] Module parse failed: C:\Users\steko\Desktop\webpack-electron-react-sass-conf\node_modules\font-awesome\css\font-awesome.css Unexpected character '@' (7:0)
[1] You may need an appropriate loader to handle this file type.
[1] | /* FONT PATH
[1] |  * -------------------------- */
[1] | @font-face {
[1] |   font-family: 'FontAwesome';
[1] |   src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
[1]  @ ./node_modules/react-fa/lib/index.js 13:0-44
[1]  @ ./src/AwesomeComponent.jsx
[1]  @ ./src/index.jsx

这很奇怪，因为我为 css 添加了样式加载器。如何解决？

git

【问题讨论】：

标签： javascript reactjs webpack font-awesome preprocessor

【解决方案1】：

@VINET 你需要在你的 webpack conf 中添加一个规则来处理 CSS 文件。

尝试在您的配置中添加以下规则

  {
    test: /\.css$/,
    loader: "style-loader!css-loader"
  },

【讨论】：

【解决方案2】：

尝试为 webpack.config 中的字体文件使用 url 加载器

{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?mimetype=application/font-woff',
  },
  {
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?mimetype=application/font-woff',
  },
  {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?mimetype=application/octet-stream',
  },
  {
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
  },

【讨论】：