如何修复您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序以使用webpack 4处理该文件

Question

我正在尝试修复插件，但似乎无法开箱即用。它最初使用的是webpack v2和babel 6，所以我决定将其升级为wepack 4和babel7。即使如此，它似乎也不适合webpack。我得到的错误是

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
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
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

我的webpack文件是

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: ['babel-loader'] 
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use:['style-loader','css-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

可以在https://github.com/shorif2000/react-js-banner找到仓库

Answer 1

问题是webpack 不了解 React的JSX语法，因此它无法正确处理此文件类型。为了解决这个问题，您需要设置一个webpack加载器以将JSX转换为本地JavaScript。为此，您需要利用babel的babel-loader并安装适当的babel预设，即"@babel/preset-react"预设。

A preset是一组用于支持特定语言功能的插件。您可以使用预设来利用浏览器中尚未实现的最新JavaScript功能。

预设将转换您的源代码和语法，使其与浏览器可以理解的本机JavaScript兼容。例如，[[JSX浏览器并不自然理解。]]

也许您可以尝试以下方法，看看这些步骤是否可以解决您的问题：

1. 安装Babel的React预设：

   @babel/preset-react

在npm install --save-dev @babel/preset-react（或.babelrc）文件中，根据您对预置和插件进行Babel配置的位置，添加新的预置以处理react的JSX特定语法。

Note：如果没有package.json文件，则将一个添加到项目的根目录，并为其提供以下内容：

。babelrc：

.babelrc
更新{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
文件中的rules部分，以使用适当的加载程序：

webpack.config.js

注：我还将在

{
    test: /\.(js|jsx)$/,
    include: path.resolve(__dirname, 'src'),
    exclude: /(node_modules|bower_components|build)/,
    use: ['babel-loader']
  }

中添加一个resolve部分，以配置如何在项目中解析模块。类似于以下内容：

webpack.config.js
为了完整起见，我使用React创建了一个简单的Web应用程序，并通过webpack-dev-server提供服务。下面粘贴的是我的全部 resolve: {
    extensions: ['*', '.js', '.jsx']
  },
内容：

webpack.config.js
希望有帮助！