在要求文件由自定义加载程序

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尝试要求sassConfig.js时，Webpack不会使用加载程序来解析config.json。它试图将其作为常规json文件加载，导致它因注释而失败。我尝试过使用import config from '!!remove-json-comments-loader!../../config.json';，但是webpack说它无法找到该文件。

我是编写webpack加载器的新手，所以我确信这很简单。救命？谢谢！

这是github repo的链接：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文件假定位于包中，而不是作为加载程序内部代码的一部分。因此，最好只使用您用来使用config.json模块加载json5的变通方法，这样可确保您的加载程序不会自行查找修改后的代码