编程知识 cdmana.com

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

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

  1. .jsx能不能像.js文件一样,省略后缀名,也能解析?
    能。需要配置 webpack 的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://wuyujin.blog.csdn.net/article/details/108542700

Scroll to Top