使用webpack加载.jsx文件

Question

我在使用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加载器和jsx-loader，但所有情况下都出现相同的错误。 这些加载器也不起作用：

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

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

- Ivan Kuzyshyn

---

它因为exclude: [/node_modules/, /public/]而失败，根据错误信息。你可以尝试从列表中删除/public/，看看是否解决了问题。我个人更喜欢维护include而不是exclude（白名单优于黑名单），因为这样读起来更好。 - Juho Vepsäläinen

这个回答解决了你的问题吗？如果文件名为jsx，webpack找不到模块 - csbarnes

Answer 1

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

import Somthing from './Something.jsx'

- Tomer

Answer 2

试试这个

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

- Skribja

---

这个意思是：webpack: 属性'loaders'不允许。 - kca

Answer 3

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

请更新以下行的webpack文件

exclude: [/node_modules/, /public/],

到

exclude: [/node_modules/],

适用于.js和.jsx加载器。

- Galeel Bhasha