在我的根目录 webpack 4 之外转译和检查文件

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或处理模块根目录之外的文件，在这种情况下我将不得不将 src 文件中的文件复制到模块中，处理它们，然后再次将 generated/processed 文件移动到模块外部，我真的不喜欢这种方法，这就是为什么我来这里看看是否你可以帮我解决这个问题。

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 之外转译和检查文件

Transpiling and linting files outside of my root directory webpack 4

javascript

build

sass

webpack

webpack-4