【问题标题】:Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type模块解析失败:意外字符 '�' (1:0) 您可能需要适当的加载程序来处理此文件类型
【发布时间】:2019-03-19 06:23:06
【问题描述】:

我正在为我的 react 应用程序使用 styleguidist,这是我的 styleguid.config.js 文件的代码:

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }
      ]
    }
  }
}

现在我想在http://localhost:6060 中运行的 styleguidist 服务器中显示条形码图像。 我的 styleguidist 的代码 readme.md

```jsx
var Macybarcode = require('../../../containers/assets/img/macy/barcode.png');
const barcode_img = Macybarcode;
const barcode_no = "33527111690008";

<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />   
```

但是每当我尝试显示图像时,我的服务器都会出现以下错误:

Please click to see the Error console

【问题讨论】:

    标签: reactjs react-styleguidist


    【解决方案1】:

    你需要图片的 url-loader

    用途:

    npm install url-loader --save

    module.exports = {
      webpackConfig: {
        module: {
          rules: [
            // Babel loader, will use your project’s .babelrc
            {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader'
            },
            // Other loaders that are needed for your components
            {
              test: /\.css$/,
              loader: 'style-loader!css-loader?modules'
            },
            {
                    test: /\.(jpg|png|svg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 25000
                        }
                    }
                }
          ]
        }
      }
    }

    【讨论】:

      【解决方案2】:
      try this line inside    
       { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
      

      【讨论】:

        猜你喜欢
        • 2021-02-10
        • 2019-01-28
        • 2018-02-27
        • 1970-01-01
        • 2018-07-12
        • 2019-02-26
        • 2022-08-09
        • 1970-01-01
        • 2022-11-10
        相关资源
        最近更新 更多