如何修复你可能需要一个合适的加载器来处理这个文件类型，目前没有加载器被配置为使用 webpack 4 处理这个文件

Question

我正在尝试修复一个插件，但似乎无法开箱即用的 webpack。它最初使用的是 webpack v2 和 babel 6，所以我决定将它升级到 wepack 4 和 babel 7。即便如此，它似乎也不是 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。为此，您需要利用 babelbabel-loader并安装适当的 babel 预设，即"@babel/preset-react"预设。

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

预设将转换您的源代码和语法，使其与浏览器理解的本机 JavaScript 兼容。例如，@babel/preset-react将允许您编写 JSX（JavaScript as XML）样式代码，该代码通常用于定义 React 组件，尽管浏览器并不自然理解 JSX。

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

1. 安装 babel 的 react 预设：

   npm install --save-dev @babel/preset-react

2. 在您的.babelrc（或package.json）文件中，根据您对预设和插件的 Babel 配置的位置，添加新预设以处理 React 的 JSX 特定语法。

注意：如果您没有.babelrc文件，请在项目的根目录中添加一个文件并为其提供以下内容：

.babelrc：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

3. 更新文件中的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来配置如何在您的项目中解析模块。类似的东西：

 resolve: {
    extensions: ['*', '.js', '.jsx']
  },

为了完整起见，我使用 React 创建了一个简单的 Web 应用程序，并从 webpack-dev-server 提供服务。下面粘贴的是我的全部webpack.config.js内容：

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};

希望这有帮助！