webpack 配置解析 JSX 两步

1. 如何解析.jsx结尾的模块(文件)？
   配置 webpack 众多loader 中的：babel-loader的规则即可。

module.exports = {
     

    entry: {
     },    
    output: {
     },
    plugins: [],
  
    module: {
     
        rules: [
            {
     
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
     
                    loader: 'babel-loader',
                    options: {
     
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
        ]
    },

};

但：现在的引入方式依然是：

import App from "./App.jsx";

即：你需要写全文件的后缀名。

2. .jsx能不能像.js文件一样，省略后缀名，也能解析？
   能。需要配置 webpack 的resolve：
   暂时只需要配置该配置下的两个配置项：
   • extensions
   • mainFiles
     官网链接见：https://www.webpackjs.com/configuration/resolve/

module.exports = {
     

    entry: {
     },    
    output: {
     },
    plugins: [],
    resolve: {
     
		// 要解析的文件的扩展名
        extensions: [".js", ".jsx", ".json"],
		// 解析目录时要使用的文件名
        mainFiles: ["index"],
    },

    module: {
     
        rules: [
            {
     
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
     
                    loader: 'babel-loader',
                    options: {
     
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
        ]
    },

};

此时再次引入App.jsx模块，写法：

import App from "./App";