要求自定义加载器处理文件时未使用 Webpack 加载器

Question

我正在尝试编写一个自定义 Webpack 加载程序，它读取 JavaScript 文件并导出 SASS 变量，类似于 js-to-sass-var-loader 但具有一些附加功能。

/webpack-loaders/js-to-sass-loader.js

import _ from 'lodash';
import path from 'path';

const importRegex = /@import\s+'([^']+\.js)'\s*;/ig;

/* 
    functions for transforming...
*/

export default function (content) {
    let self = this;

    // search for "@import '*.js';" and replace that text with
    // the transformed output of the specified JavaScript file
    return content.replace(importRegex, (match, relativePath) => {
        if (match) {
            let modulePath = path.join(self.context, relativePath);
            self.addDependency(modulePath);
            let data = require(modulePath).default;
            return transform(data);
        }
    });
}

此 JavaScript 文件加载一个 .json 配置文件，进行一些处理并吐出一个对象。

/client/sass/sassConfig.js

import config from '../../config.json';

console.log('Generating SASS variables.');
let sass = {
    // some special values here
    };

for (let key of Object.keys(config.style)) {
    sass[key] = config.style[key];
}

sass.debug = (process.env.NODE_ENV || 'production').trim() === 'development';

export default sass;

json 文件包含注释，所以我用另一个简单的加载程序将它们剥离。这只是使用 json5 解析 json 文件，然后将输出字符串化并传递给它。

/webpack-loaders/remove-json-comments-loader.js

import json5 from 'json5';

export default function (source) {
    return JSON.stringify(json5.parse(source));
}

我的 webpack.config.babel.js 包括 sass 和 json 文件使用这两个加载器的规则。

/webpack.config.babel.js

// ... imports ...

const webpackConfig = {
    entry: {
        app: './client/script.js',
    },

    output: {
        filename: 'script.js',
        path: path.resolve(__dirname, 'public')
    },

    resolveLoader: {
        alias: {
            'js-to-sass-loader': path.resolve(__dirname, 'webpack-loaders/js-to-sass-loader'),
            'remove-json-comments-loader': path.resolve(__dirname, 'webpack-loaders/remove-json-comments-loader')
        }
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'remove-json-comments-loader',
            },
            {
                test: /\.s[ca]ss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader' },
                        { loader: 'sass-loader' },
                        { loader: 'js-to-sass-loader' },
                    ]
                }),
            },
            // ...
        ],
    },

    plugins: [
        // ...
        new ExtractTextPlugin({ filename: 'style.css' }),
        // ...
    ],

    // ...
};

module.exports = webpackConfig;

在我的一些 JavaScript 文件中，我可以 import Config from './path/to/config.json' 没有问题。它正确地使用了 remove-json-comments-loader。但是当我的 js-to-sass-loader 尝试 require sassConfig.js 时，Webpack 不使用加载程序来解析 config.json。它尝试将其作为常规 json 文件加载，这导致它因注释而失败。我试过使用 import config from '!!remove-json-comments-loader!../../config.json'; 但 webpack 说找不到文件。

我是编写 webpack 加载程序的超级新手，所以我确信这很简单。帮助？谢谢！

这是 github 回购的 link：https://github.com/dfoverdx/PokeStreamer-Tools/tree/9b4c7315d5dc6b30c5972a0b8678489598311bf0

要重现该问题，请打开 /node/client/sass/sassConfig.js，并将前四行更改为：

// import json5 from 'json5';
// import fs from 'fs';
// const config = json5.parse(fs.readFileSync('config.json'));
import config from '../../config.json';

即注释前3行，取消注释第4行

来自 /node 运行 npm run build 产生错误。

Answer 1

如前所述，以下是我的观察

您正在尝试创建加载器
您的加载程序需要直接使用 require 本机 nodejs 方法的文件
您的 js-to-sass-loader 需要 sassConfig.js 然后直接需要 config.json 文件
config.json 是包含注释的原始文件，因此不能被要求如此

所以关键要点是你正在混合 webpack，它基本上是关于将东西捆绑成包，然后需要捆绑的代码。这就是为什么 json 在其余代码中工作而不在 sassConfig.js.

中工作的原因

理想情况下，加载程序不应 require 处理 json 文件本身。处理后的 json 文件应该放在 bundle 中，而不是加载程序内部代码的一部分。因此，最好只使用您使用 json5 模块加载 config.json 的解决方法，这可确保您的加载程序本身不会寻找修改后的代码

要求自定义加载器处理文件时未使用 Webpack 加载器

Webpack loader not being used when requiring file being processed by custom loader

node.js

webpack

webpack-loader

/webpack-loaders/js-to-sass-loader.js

/client/sass/sassConfig.js

/webpack-loaders/remove-json-comments-loader.js

/webpack.config.babel.js