[英]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. 我尝试使用webpack 4从位于
node_modules
文件夹中的模块内部的模块内部处理Frontend / src(es6和scss)中的文件,但babel-loader无法编译并且sass-loader无法正常工作,因此css-loader也不会。 This is how my webpack config looks for the modules.rules
这是我的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')]
}
}
]
}
]
}
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. 我一直在阅读, 可能无法在模块的目录根目录之外进行转载或处理文件,在这种情况下,我必须将文件从src文件复制到模块中,进行处理,然后将生成的/再次将文件处理到模块之外,我真的不喜欢这种方法,这就是为什么我来这里看看您是否可以帮助我。
Solved this by resolving loaders with require.resolve
instead of calling them as strings. 通过使用
require.resolve
解决加载程序,而不是将它们作为字符串来解决。
In example in my webpack config instead of 例如在我的webpack配置而不是
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. 所有其他装载程序都遵循相同的模式,这解决了我的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.