webpack学习

const graph = createGraph(‘./example/entry.js‘);
const result = bundle(graph);

console.log(result);
const fs = require(‘fs‘);
const path = require(‘path‘);
const babylon = require(‘babylon‘);
const traverse = require(‘babel-traverse‘).default;
const {transformFromAst} = require(‘babel-core‘);

let ID = 0;
function bundle(graph) {
  let modules = ‘‘;
  graph.forEach(mod => {
    modules += `${mod.id}: [
      function (require, module, exports) {
        ${mod.code}
      },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });
  const result = `
    (function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];

        function localRequire(name) {
          return require(mapping[name]);
        }

        const module = { exports : {} };

        fn(localRequire, module, module.exports);

        return module.exports;
      }

      require(0);
    })({${modules}})
  `;

  // We simply return the result, hurray! :)
  return result;
}

function createGraph(entry) {
  // Start by parsing the entry file.
  const mainAsset = createAsset(entry);
  const queue = [mainAsset];
  for (const asset of queue) {
    asset.mapping = {};

    // This is the directory this module is in.
    const dirname = path.dirname(asset.filename);

    // We iterate over the list of relative paths to its dependencies.
    asset.dependencies.forEach(relativePath => {
      const absolutePath = path.join(dirname, relativePath);
      // Parse the asset, read its content, and extract its dependencies.
      const child = createAsset(absolutePath);
      asset.mapping[relativePath] = child.id;
      queue.push(child);
    });
  }
  return queue;
}
function createAsset(filename) {
// Read the content of the file as a string.
const content = fs.readFileSync(filename, ‘utf-8‘);
const ast = babylon.parse(content, {
sourceType: ‘module‘,
});
const dependencies = [];
traverse(ast, {
ImportDeclaration: ({node}) => {
dependencies.push(node.source.value);
},
});
const id = ID++;
const {code} = transformFromAst(ast, null, {
presets: [‘env‘],
});
return {
id,
filename,
dependencies,
code,
};
}