使用 webpack 加载 .jsx 文件

Posted 2023-02-21

技术标签:

【中文标题】使用 webpack 加载 .jsx 文件【英文标题】：Load .jsx files with webpack 【发布时间】：2016-11-20 02:48:00 【问题描述】：

我在使用 webpack 加载 .jsx 文件时遇到问题。我有这个webpack.config.js：

var webpack = require('webpack');

module.exports = 
    entry: "./static/js/storage/src/index.js",
    output: 
        path: './static/js/storage/public/',
        publicPath: "public/",
        filename: "bundle.js"
,

resolve: 
    extensions: ['', '.js', '.jsx']
,

module: 
    loaders: [
        
            test: /\.js$/,
            loader: "babel-loader",
            exclude: [/node_modules/, /public/],
            query: 
                plugins: ['transform-runtime'],
                presets: ['es2015', 'stage-0', 'react']
            
        ,
        
            test: /\.jsx$/,
            loader: "react-hot!babel",
            exclude: [/node_modules/, /public/]
        
    ]

;

我的应用程序有这个包：

"dependencies": 
    "jquery": "^3.1.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
,
    "devDependencies": 
    "autoprefixer-loader": "^3.2.0",
    "babel": "^6.5.2",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "json-loader": "^0.5.4",
    "jsx-loader": "^0.13.2",
    "react": "^15.2.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"

当我尝试在控制台中运行 webpack 时出现此错误：

模块解析失败： /static/js/storage/src/components/StorageApp.jsx 意外令牌 (12:12) 您可能需要适当的加载程序来处理此文件类型。

我的 webpack 无法加载 jsx 文件。我认为这个问题出在我的 jsx 加载程序中。但我不知道具体是什么问题。

我尝试使用带有预设的 react-hot、babel loader 和 jsx-loader，但在所有情况下错误都是相同的。此加载器不适用于：

test: /\.jsx$/,
    loader: 'babel',
    query: 
        presets: ['react', 'es2015']
,

有人可以帮忙解决这个问题吗？

【问题讨论】：

它失败了，因为 exclude: [/node_modules/, /public/] 基于错误。您可以尝试从列表中删除 /public/ 以查看是否可以解决问题。我更喜欢自己维护include 而不是exclude（白名单而不是黑名单），因为这样读起来更好。这能回答你的问题吗？ webpack can't find module if file named jsx 【参考方案1】：

我通过为每个导入的组件添加.jsx 后缀来解决它，如下所示：

import Somthing from './Something.jsx'

【讨论】：

【参考方案2】：

试试这个

loaders: [
        
            test: /\.jsx?$/,
            loader: "babel-loader",
            exclude: [/node_modules/, /public/],
            query: 
                plugins: ["react-hot-loader/babel", 'transform-runtime'],
                presets: ['es2015', 'stage-0', 'react']
            
        
    ]

【讨论】：

这说：webpack: Property 'loaders' is not allowed【参考方案3】：

由于您在 webpack 设置中排除了“public”文件夹，因此编译器无法解析 .jsx 文件。

在下面更新你的 webpack 文件