Question

我正在开发一个模块来处理其根目录外部的文件，例如，如果我具有以下文件夹结构：

Frontend -> src -> chunks -> js -> main.es6

Frontend -> src -> chunks -> scss -> styles.scss

Frontend -> node_modules -> @workspace -> module -> client -> index.js

我尝试使用webpack 4从位于node_modules文件夹中的模块内部处理Frontend / src（es6和scss）中的文件，但是babel-loader无法编译，并且sass-loader无法正常工作，并且结果也不是css-loader。这就是我的webpack配置查找modules.rules

的方式

module: {
    rules: [
        {
            test: /(.es6|.js)$/,
            exclude: /node_modules/,
            include: [Path.resolve(__dirname, './../../../../../src/**/main.es6')],
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        },
        {
            enforce: 'pre',
            test: /(.es6|.js)$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            include: Path.resolve(__dirname, '../../../../../src/**/*.es6'),
            options: {
                cache: false,
                configFile: ExternalConfigsPaths.ESLINT,
                emitWarning: true
            }
        },
        {
            test: /\.s?css/i,
            include: Path.resolve(__dirname, './../../../../../src/**/*.scss'),
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                        includePaths: [Path.resolve(__dirname, './../../../../../src/**/*.scss')]
                    }
                }
            ]
        }
    ]
}

我一直在阅读，transpile可能无法在模块目录根目录之外Here或处理文件，在这种情况下，我将不得不从将src文件放入模块中，进行处理，然后将生成的/处理后的文件再次移至模块外部，我真的不喜欢这种方法，这就是为什么我要来这里看看是否可以帮助我这个。

Answer 1

通过使用require.resolve解析加载程序而不是将其称为字符串来解决此问题。

在我的webpack配置中，而不是

loader: 'babel-loader',
options: {
    presets: ['@babel/preset-env']
}

我做到了：

loader: require.resolve('babel-loader'),
options: {
    presets: [require.resolve('@babel/preset-env')]
}

对所有其他加载程序采用相同的模式，这解决了我的问题。

在我的根目录webpack 4之外转储和整理文件

1 个答案: