如何忽略原始加载器以测试 webpack答案

【问题标题】：How to ignore raw loader for testing webpack如何忽略原始加载器以测试 webpack
【发布时间】：2016-04-26 05:47:39
【问题描述】：

我有一些使用 webpack 原始加载器内联加载 svg 的组件，例如...

import React, { Component } from 'react'
import svg from '!raw!../assets/images/logo.svg'

export default class Logo extends Component {
  render() {
    return (<a href={this.props.url} dangerouslySetInnerHTML={{__html: svg}} />)
  }
}

当尝试使用磁带在服务器端测试这些组件时，它们会摔倒。如果我包含 css 模块，那没问题，我可以使用 css-modules-require-hook 但 svg 将不起作用。所以我真的需要一个 raw loader require hook 或类似的东西。

require('babel-register');
require('css-modules-require-hook/preset');
/* tests after this can import components with css includes */

我尝试使用isomorphic-ensure，但这不起作用。

require('babel-register');
require('css-modules-require-hook/preset');
require('isomorphic-ensure')({
  loaders: {
    raw: require('raw-loader'),
    raw: require('react-svgdom-loader')
  },
  dirname: __dirname
})

我收到以下错误：

Cannot find module '!raw!../assets/images/

【问题讨论】：

您是否通过 webpack 运行测试？如果没有，您可以将import 推到模块外部并将其注入那里（作为道具传递）吗？如果这对您不起作用，您可以考虑使用rewire 之类的东西吗？
不，我没有用于我的测试的 webpack 配置，只有 require('babel-register'); 然后是 require( 'isomorphic-ensure') 然后是我的组件、操作、reducer 测试列表。例如require('./components/Logo.spec.js');
在我的实际应用程序的 webpack.config 中，我有以下 svg 加载器：{ test: /\.svg$/, loaders: ['react-svgdom', 'svgo'] }
好的。为了让您更轻松并避免猴子补丁，请考虑将 webpack 特定部分推出模块。如果您想保留导入，请尝试rewire。我不能保证它会起作用，但至少值得一试。

标签： javascript reactjs webpack

【解决方案1】：

如果您没有使用 webpack 进行测试，那么您可以使用 ignore-styles module。

如果您打算将它与 css-modules-require-hook 一起使用，您可能需要对其进行配置，因为它也会忽略 CSS files by default。例如：

require('ignore-styles').register(['.svg'])

【讨论】：