深入理解webpack打包bundle.js的机制

本文通过实际打包查看bundle.js的源码的方式来理解webpack的打包输出。

项目目录如下：

+ index.js
+ package.json
+ webpack.config.js

其中webpack.config.js的配置如下

const path = require('path');
module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'demo',
    libraryTarget: 'umd'
  },
}

index.js来模拟一个需要导出的包。并使用了esmodule的方式导出。

function demo() {
  console.log('this is demo');
}

export default demo;

以上的配置是希望打包出一个支持umd模块规范的lib库。执行webpack打包出了./dist/bundle.js，最好配合node中commonjs的规范对比理解。

我这里先把commonjs执行的过程列一下，详细见这里

//