在我的根目录webpack 4之外转储和整理文件 [英] Transpiling and linting files outside of my root directory webpack 4

问题描述

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

I'm developing a module that processes files from outside its root directory, so, for example, if I have the following folder structure:

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

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

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

我尝试从内部处理Frontend / src（es6和scss）内部的文件带有webpack 4的 node_modules 文件夹中的模块，但babel-loader未进行编译，并且sass-loader无法正常工作，因此css-loader也没有。这是我的webpack配置查找 modules.rules

I try to process the files inside Frontend/src (es6 and scss) from inside the module located in the node_modules folder with webpack 4 but babel-loader is not transpiling and sass-loader is not working correctly and neither is css-loader in consequence. This is how my webpack config looks for the 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')]
                    }
                }
            ]
        }
    ]
}

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

I've been reading that it might not be possible to transpile or process files outside of the directory root of the module in which case I would have to copy the files from the src files into the module, process them and then move the generated/processed files again to outside of the module, I don't really like this approach and that is why I'm coming here to see if you can give me a hand on this.

推荐答案

通过使用 require.resolve 解决加载程序而不是调用来解决此问题他们作为字符串。

Solved this by resolving loaders with require.resolve instead of calling them as strings.

在我的webpack配置中，而不是

In example in my webpack config instead of

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

我做到了：

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

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

Followed the same pattern for all the others loaders and this solved my issue.

这篇关于在我的根目录webpack 4之外转储和整理文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！