- 如何解析
.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";
即:你需要写全文件的后缀名。
.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";