Webpack: can I provide a "virtual" file from a string?

Question

I have JSON that is created during assembly in my Webpack application - is there a way I can "enter" its path during assembly? I know that I can just write it to a file and include it that way, but I hope I can do something cleaner.

Answer 1

Edit 2018/04/09: val-loader is another way to achieve injection code and values ​​during build, but this requires loading this code from a separate file, which cannot access JSON data in the OP setup if it exists only in memory.

. 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 mock fs.stat() fs._statStorage.data. fs.Stats mock-fs package.

webpack 1.x 2.x, webpack-dev-. 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 -.

, NodeJS 4.x .