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']
            }
        }
    }]
}