Webpack:我可以从字符串中提供 "virtual"文件吗？

Question

我有一些在构建时在我的 Webpack 应用程序中创建的 JSON - 有什么方法可以在构建期间用路径“注入(inject)”它？我知道我可以把它写到一个文件中并以这种方式包含它，但我希望我能做一些比这更干净的事情。

Answer 1

2020 年 10 月 27 日编辑:webpack-virtual-modules是一个可以做到这一点并且与 webpack 5 兼容的项目
编辑 2018/04/09:val-loader是在构建时实现注入(inject)代码和值的另一种方法，但它需要从单独的文件加载该代码，如果该文件仅存在于内存中，则该文件可能无法访问 OP 设置中的 JSON 数据。
我也在寻找一种方法来做到这一点。我最终深入研究了 webpack 的内部结构并编写了一个似乎可以工作的插件。
它很干净，因为您不必将文件写入磁盘，但是它的内部有点困惑，因为我必须了解 webpack 的 CachedInputFileSystem 是如何工作的。
使用装载机似乎不可能做到这一点。 Webpack 需要解析磁盘上的文件位置并读取其中的内容，然后才能进入加载器阶段。
通过在 compiler.resolvers.normal 的“解决”阶段放置一个插件函数，可以访问 webpack 正在使用的文件系统，然后将虚拟文件名和内容添加到该文件系统的缓存中。
完成此操作后，其他一切在 webpack 中正常工作，您的虚拟文件/模块将通过您配置的其他加载器和插件。
见 https://github.com/rmarscher/virtual-module-webpack-plugin对于我写的代码。已发布到 npm:https://www.npmjs.com/package/virtual-module-webpack-plugin
这是插件解析部分的代码。请注意，此示例适用于 webpack 1 和 2，但插件已更新以适用于更新的版本:

compiler.resolvers.normal.plugin('resolve', function resolverPlugin(request, cb) {
  // populate the file system cache with the virtual module
  const fs = this.fileSystem;

  // webpack 1.x compatibility
  if (typeof request === 'string') {
    request = cb;
    cb = null;
  }

  if (!modulePath) {
    modulePath = this.join(compiler.context, moduleName);
  }
  VirtualModulePlugin.populateFilesystem({ fs, modulePath, contents, ctime });
  if (cb) {
    cb();
  }
});

populateFilesystem静态方法将内容添加到 fs._readFileStorage.data并创建一个模拟结果到 fs.stat()在 fs._statStorage.data缓存。用于创建模拟 fs.Stats对象，我从 mock-fs package 借了一些代码.
到目前为止，我已经使用最新的 webpack 1.x 和 2.x 以及 webpack-dev-server 对其进行了测试。我用过 extract-text-webpack-plugin , json-loader , raw-loader和 css-loader .一切似乎都按预期工作。
这是一个使用插件的 webpack 配置:

'use strict';

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const VirtualModulePlugin = require('virtual-module-webpack-plugin');

module.exports = function webpackConfig() {
  const runtimeJsonContents = JSON.stringify({
    greeting: 'Hello!',
  });
  const runtimeStyleContents = `
    body { background: #000; color: #ccc; }
    .greeting { font: 600 40px/50px fantasy; text-align: center; }
  `;

  const config = {
    context: __dirname,
    devtool: 'source-map',
    entry: {
      index: './src/index',
    },
    output: {
      filename: '[name].js',
      path: 'dist',
      publicPath: '/',
      devtoolModuleFilenameTemplate: '../[resource-path]',
    },
    module: {
      loaders: [
        {
          test: /\.json$/,
          loaders: ['json-loader'],
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style-loader',
            loader: 'css-loader?sourceMap',
          }),
        },
      ],
    },
    plugins: [
      new VirtualModulePlugin({
        moduleName: 'src/mysettings.json',
        contents: runtimeJsonContents,
      }),
      new VirtualModulePlugin({
        moduleName: 'src/css/generated.css',
        contents: runtimeStyleContents,
      }),
      new ExtractTextPlugin({
        filename: '[name].css',
        allChunks: true,
      }),
    ],
    resolve: {
      modules: [
        path.join(__dirname, 'src'),
        'node_modules',
      ],
    },
  };
  return config;
};

见 https://github.com/rmarscher/virtual-module-webpack-plugin/tree/master/examples对于不同版本的 webpack 的完整示例。
我还应该注意，此代码需要 NodeJS 4.x 或更高版本。