├── .gitignore ├── README.md ├── index.html ├── index.js ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | .nyc_output 4 | coverage 5 | package-lock.json 6 | bundle.js 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # memfs-webpack 2 | 3 | Example of how to use [`memfs`][memfs] with [`webpack`][webpack]. 4 | 5 | Basically you need to add an alias like this: 6 | 7 | ```js 8 | alias: { 9 | 'fs': 'memfs', 10 | } 11 | ``` 12 | 13 | to your `webpack.config.js`: 14 | 15 | ```js 16 | module.exports = { 17 | devtool: 'inline-source-map', 18 | entry: './index.js', 19 | output: { 20 | filename: 'bundle.js' 21 | }, 22 | resolve: { 23 | extensions: ['.js'], 24 | alias: { 25 | 'fs': 'memfs', 26 | } 27 | }, 28 | module: { 29 | loaders: [ 30 | { 31 | test: /\.js$/, 32 | loader: 'babel-loader', 33 | query: { 34 | presets: ['es2015'] 35 | } 36 | } 37 | ] 38 | }, 39 | }; 40 | ``` 41 | 42 | ### Getting started with this example 43 | 44 | ```js 45 | git clone https://github.com/streamich/memfs-webpack 46 | cd memfs-webpack 47 | npm install 48 | npm run start 49 | ``` 50 | 51 | Now open your browser and go to [http://localhost:8080/index.html](http://localhost:8080/index.html). 52 | Open dev console and you should see: 53 | 54 | index.js:4 Hello world! 55 | index.js:5 Object {/text.txt: "Hello world!"} 56 | 57 | It is output from `memfs`, although in the code we used the actual `fs` module: 58 | 59 | ```js 60 | import {vol, writeFileSync, readFileSync} from 'fs'; 61 | 62 | writeFileSync('/text.txt', 'Hello world!'); 63 | console.log(readFileSync('/text.txt', 'utf8')); 64 | console.log(vol.toJSON()); 65 | ``` 66 | 67 | 68 | 69 | [memfs]: https://github.com/streamich/memfs 70 | [webpack]: https://github.com/webpack/webpack 71 | 72 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import {vol, writeFileSync, readFileSync} from 'fs'; 2 | 3 | writeFileSync('/text.txt', 'Hello world!'); 4 | console.log(readFileSync('/text.txt', 'utf8')); 5 | console.log(vol.toJSON()); 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Example of memfs usage with webpack", 3 | "scripts": { 4 | "start": "webpack-dev-server", 5 | "build": "webpack" 6 | }, 7 | "dependencies": { 8 | "memfs": "^2.0.5" 9 | }, 10 | "devDependencies": { 11 | "babel-loader": "^7.1.1", 12 | "babel-core": "^6.25.0", 13 | "babel-preset-es2015": "^6.24.1", 14 | "webpack": "^3.5.3", 15 | "webpack-dev-server": "^2.7.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devtool: 'inline-source-map', 3 | entry: './index.js', 4 | output: { 5 | filename: 'bundle.js' 6 | }, 7 | resolve: { 8 | extensions: ['.js'], 9 | alias: { 10 | 'fs': 'memfs', 11 | } 12 | }, 13 | module: { 14 | loaders: [ 15 | { 16 | test: /\.js$/, 17 | loader: 'babel-loader', 18 | query: { 19 | presets: ['es2015'] 20 | } 21 | } 22 | ] 23 | }, 24 | }; 25 | --------------------------------------------------------------------------------