webpack 配置解析 JSX 两步

Dear 丶 2022-12-06 04:08 245阅读 0赞

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";

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

1.  `.jsx`能不能像`.js`文件一样，省略后缀名，也能解析？  
    能。需要配置 webpack 的`resolve`：  
    暂时只需要配置该配置下的两个配置项：
    
     *  `extensions`
     *  `mainFiles`  
        官网链接见：[https://www.webpackjs.com/configuration/resolve/][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";

[https_www.webpackjs.com_configuration_resolve]: https://www.webpackjs.com/configuration/resolve/