reactjs - Webpack 4 作为 JSX 文件

Question

有没有办法在 Webpack 4 上加载 JSX 文件？

我试过:

module.exports = {
    resolve: {
        extensions: [".jsx", ".js"]
    }
}                              

但显然我的 src/index.jsx 文件已加载但未处理。

Answer 1

你这里有一半。 resolve.extensions 让你

require('./my-module.jsx')

无需输入 .jsx 部分。即

require('./my-module')

但是，正如您所指出的那样 - 源代码不会以任何方式处理，因此如果您有需要转换的语法(例如 jsx)，则需要注意这一点。

默认情况下，Webpack 不会为您执行此操作，您需要使用带有预设或插件的 babel-loader 来转换语法。有很多教程如何做到这一点，但它看起来像这样:

module: {
    rules: [{
        exclude: /node_modules/, // don't transpile node_modules
        test: /\.jsx$/,          // do transpile any files ending in .jsx
        use: {
            loader: 'babel-loader',
            options: {
                plugins: ['@babel/plugin-transform-react-jsx']
            }
        }
    }]
}