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

Answer 2

您需要安装

 npm i @babel/preset-react --save

将此添加到预设数组内的.babelrc文件中。我们在webpack.config对象的module属性内使用加载程序，因为加载程序对一种类型的文件有效，而插件对整个捆绑软件有效。

.babelrc

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

所有webpack项目都需要@ babel / preset-env。您也可以安装它。 }

Webpack 4作为JSX文件

2 个答案: