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

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')]
                    }
                }
            ]
        }
    ]
}

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.

回答1:

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

In example in my webpack config instead of

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

I did:

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.

来源：https://stackoverflow.com/questions/56093213/transpiling-and-linting-files-outside-of-my-root-directory-webpack-4

标签

javascript

Webpack

build

Sass

webpack-4