我在 webpack 配置中使用了 resolveExtensions,如下所示。
const commonOpts = {
isExternalEnv: true,
outputPath: 'dist/production/www',
resolveExtensions: ['.js', '.ts', '.json', '.jsx', '.scss']
}
对于普通组件来说工作正常。
因为我在项目中使用模块联合概念。因此,我公开了如下所示的组件,其中 resolveExtensions 配置不起作用。
const commonOpts = {
isExternalEnv: true,
outputPath: 'dist/production/www',
resolveExtensions: ['.js', '.ts', '.json', '.jsx', '.scss'],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: 'sass-resources-loader',
options: {
resources: require('./src/styles/common/index.js'),
},
},
],
},
],
},
moduleFederationOpts: {
name: 'MyApp',
filename: 'js/my-app-entry.js',
exposes: {
'./myapp': './src/app.js',
'./myAppBlock': './src/modules/blocks/myBlock.js',
},
},
}
我们如何将 resolveExtensions 配置应用于公开的组件?
如果您使用 Webpack 5。试试这个!
resolve: {
extensions: ['*', '.js', '.jsx', '.json', '.scss', '.css'],
...
}