Webpack 4 作为 JSX 文件答案

【问题标题】：Webpack 4 as JSX filesWebpack 4 作为 JSX 文件
【发布时间】：2018-07-06 07:17:59
【问题描述】：

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

我试过了：

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

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

【问题讨论】：

标签： webpack jsx

【解决方案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']
            }
        }
    }]
}

【讨论】：

【解决方案2】：

你需要安装

 npm i @babel/preset-react --save

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

.babelrc

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

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

【讨论】：