< script src = "../../dist/nodebowl.js" >  </ script >
< script > 
  const { fs, run } = window .nodebowl;
  fs.writeFileSync( '/foo.js' , `
    module.exports = 1;
  ` );
  fs.writeFileSync( '/index.js' , `
    const num = require('./foo');
    alert(num);
  ` );
  run( '/index.js' );
 </ script >

< script src = "../../dist/nodebowl.js" >  </ script >

< h1 id = "loading" > install webpack node_modules... please wait... </ h1 >
< button onclick = "compile()" id = "compile" style = "display: none;" > click, compile webpack </ button >
< div >
  < p > /app/src/index.js </ p >
  < textarea id = "index" style = "width: 600px;height: 100px;" >
import foo from './foo';
console.log(foo);
  </ textarea >
</ div >

< div >
  < p > /app/src/foo.js </ p >
  < textarea id = "foo" style = "width: 600px;height: 100px;" >
import foo from './foo';
console.log(foo);
  </ textarea >
</ div >

< div >
  < p > /app/webpack.js </ p >
  < textarea id = "webpack" style = "width: 600px;height: 100px;" >
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');

webpack({
  mode: 'development',
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}, (err, stats) => {

  if (err || stats.hasErrors()) {
    console.log('error');
    return;
  }

  console.log('success');

  const bundlePath = path.join(__dirname, 'dist', 'bundle.js');
  const data = fs.readFileSync(bundlePath, 'utf8');
  document.getElementById('bundle').value = data;
  
});
  </ textarea >
</ div >

< div >
    < p > /app/dist/bundle.js </ p >
    < textarea id = "bundle" style = "width: 600px;height: 100px;" > </ textarea >
  </ div >

< script > 
  const { fs, run, helpers } = nodebowl;
  /*
    -- app
    ----- src
    -------- index.js
    -------- foo.js
    ----- webpack.js
    ----- node_modules
  */
  fs.mkdirSync( '/app' );
  fs.mkdirSync( '/app/src' );
  // install node_modules
  helpers.installFromZip( 'node_modules.zip' ).then( () => {
    document .getElementById( 'loading' ).style.display = 'none' ;
    document .getElementById( 'compile' ).style.display = 'block' ;
  });
  function compile ()  {
    fs.writeFileSync( '/app/src/index.js' , document .getElementById( 'index' ).value);
    fs.writeFileSync( '/app/src/foo.js' , document .getElementById( 'foo' ).value);
    fs.writeFileSync( '/app/webpack.js' , document .getElementById( 'webpack' ).value);
    
    run( '/app/webpack.js' );
  }
 </ script >