Webpack Bundler

                    
                    

Concepts

• Webpack is a compiler which bundle modules with dependencies to static assets.

Ready

1. your computer shoule have Node.js environment
2. excuting an order : > npm install webpack webpakc-cli -g
   (this can only support one version, if you want to support free, please install them inside the project)
3. make a direction and use npm init
4. now everything is already, lets go

Configuration

1. first, your folder will like this:
2. create a new folder named src and create a new file index.js, its content like this:
3. webpack can default bundle .js files(CMD), now we try to import a image:
4. use file-loader to resovle the problem:
5. url-loader and file-loader

Code - src

// index.js
import message from './message.js';

console.log(message);

// message.js
import { word } from "./word.js";

const message = `${word} Webpack`;

export default message;

// word.js
const word = "Hello";

export { word };

Code - bundler.js

const fs = require("fs");
const path = require("path");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const babel = require("@babel/core");

/**
 * 
 * @param {String} filename
 * @description module analyse 
 */
const moduleAnalyser = filename => {
  const content = fs.readFileSync(filename, "utf-8");
  // https://babeljs.io/docs/en/babel-parser#options
  const ast = parser.parse(content, {
    sourceType: "module"
  });
  const dependencies = {};
  traverse(ast, {
    ImportDeclaration({ node }) {
      const dirname = path.dirname(filename);
      const newFile = "./" + path.join(dirname, node.source.value);
      dependencies[node.source.value] = newFile.replace(/\\/g, "/");
    }
  });
  console.log(dependencies);
  const { code } = babel.transformFromAst(ast, null, {
    presets: ["@babel/preset-env"]
  });

  return {
    filename,
    dependencies,
    code
  };
};

/**
 * 
 * @param {String} entry
 * @description  make dependencies graph
 */
const makeDependenciesGraph = entry => {
  const entryModule = moduleAnalyser(entry);
  const graphArray = [entryModule];
  for (let i = 0; i < graphArray.length; i++) {
    const { dependencies } = graphArray[i];
    for (v in dependencies) {
      graphArray.push(moduleAnalyser(dependencies[v]));
    }
  }
  const graphObject = {};
  graphArray.forEach(item => {
    graphObject[item.filename] = item;
  });
  console.log(graphObject);
  return graphObject;
};

/**
 * 
 * @param {String} entry
 * @description generate bundle code 
 */
const gengerateCode = entry => {
  const graphInfo = JSON.stringify(makeDependenciesGraph(entry));
  return `
  (function(graph) {
    function require(module) {
      function localRequire(relativePath) {
        return require(graph[module].dependencies[relativePath]);
      }
      var exports = {};
      (function(require, exports, code) {
        eval(code);
      })(localRequire, exports, graph[module].code);
      return exports;
    }
    require('${entry}')
  })(${graphInfo})`;
};

const code = gengerateCode("./src/index.js");

console.log(code);