webpack-memory2fs-plugin

Plugin that write memory files to harddist that generated by webpack when webpack-dev-server as backend

Install

  npm install webpack-memory2fs-plugin -D

  yarn add webpack-memory2fs-plugin -D

This is a webpack plugin that write memory file to harddist that generate by webpack, This is useful when we use webpack-dev-server proxy to backend service

Usage

webpack.config.js

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const Memory2fs = require('webpack-memory2fs-plugin')
  
  module.exports = {
    entry: 'index.js',
    output: {
      path: __dirname + '/dist',
      filename: 'index_bundle.js'
    },
    plugins: [
      new HtmlWebpackPlugin(),
      new Memory2fs()
    ]
  }

webpack.devserver.config.js

  const webpack = require('webpack')
  const devServer = require('webpack-dev-server')
  const wpConfigs = require('./webpack.config')
 
  const compiler = webpack(wpConfigs)
  devServer(compiler, function(){
    ...options
    port: 8300,
    proxy: {
      '*': {
        target: 'http://localhost:3000',
        ...
      }
    },
  })

This will generate files dist/index_bundle.js, dist/index.html

nodejs with koa

var koa = require('koa')
var views = require('koa-views');
 
var app = new koa()
// Must be used before any router is used
app.use(views(__dirname + '/dist', {
  map: {
    html: 'underscore'
  }
}));

Options

mapfile

Create mapfile.json to outputPath, all of file that Generated by webpack are recorded in this file

  const Memory2fs = require('webpack-memory2fs-plugin')
  module.exports = {
    ...options
    plugins: [
      new Memory2fs({
        mapfile: {
          js: ['.js', '.jsx'],
          css: ['.css'],
          html: ['.html']
        }
      })
    ]
  }

exclude

Allows you to skip some file to write
{Array.} string is extname about file, like ['.html', '.js']
{RegExp}

  const Memory2fs = require('webpack-memory2fs-plugin')
  module.exports = {
    ...options
    plugins: [
      new Memory2fs({
        exclude: ['.html', '.svg']  // or exclude: /html/
      })
    ]
  }

outputPath

Allows you to specified the output root directory

  const Memory2fs = require('webpack-memory2fs-plugin')
  module.exports = {
    ...options
    plugins: [
      new Memory2fs({
        outputPath: path.join(__dirname, 'dest')
      })
    ]
  }

extractTo

Allows you to extract files to specified directory that based on extension

The directory will be aoto created that it is a relative path offset your outputPath or webpack outputPath

  const Memory2fs = require('webpack-memory2fs-plugin')
  module.exports = {
    ...options
    plugins: [
      new Memory2fs({
        extractTo: {
          "html": ['.html', '.hbs'],
          "../myimages": ['.jpg', '.svg']
        }
      })
    ]
  }