浅析 webpack 打包流程(原理) - 案例 demo

本地新建一个项目文件夹并初始化：

mkdir webpack-demo && cd webpack-demo
npm init -y

本地安装需要的包：【babel 使用指南】

npm install --save-dev [email protected] webpack-cli
npm install --save-dev @babel/core @babel/cli @babel/preset-env

文件内容：

// src/a.js
import { add } from '@/b'
import('@/c.js').then(sub => sub(2, 1))
const a = 1
add(3, 2 + a)

// src/b.js
import mul from '@/d'
export function add(n1, n2) {
  return n1 + n2 + mul(10, 5)
}
export function unusedAdd(n1, n2) {
  return n1 + n2 * n2
}

// src/c.js
import mul from '@/d'
import('@/b.js').then(b => b.add(200, 100))
export default function sub(n1, n2) {
  return n1 - n2 + mul(100, 50)
}

// src/d.js
export default function mul(n1, n2) {
  const x = 10000
  return n1 * n2 + x
}

配置文件：

// webpack.config.js
var path = require('path');

module.exports = {
  entry: {
    index: './src/a.js'
  },
  devtool: 'none',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[chunkhash:4].js',
    chunkFilename: '[name].[chunkhash:8].js'
  },
  mode: 'development',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
};

// babel.config.json
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

我们用 VSCode 打断点来调试分析，详细操作可以看：【VSCode Node.js 调试配置 (npm 脚本启动)】

本例的launch.json文件

// .vscode/launch.json
{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node", // 调试器类型
      "request": "launch", // 请求方式，有 launch(启动) 和 attach(附加) 两种
      "name": "Launch via NPM", // 启动配置名称
      "runtimeExecutable": "npm", // 任务运行工具，'npm', 'mocha', 'gulp' 等，默认为node
      "runtimeArgs": ["run-script", "debug"], // 传递给执行工具的可选参数
      "port": 9339, // 启动程序的端口
      "console": "externalTerminal", // 指定启动控制器为外部终端
      "skipFiles": ["/**/*.js"] // 跳过所有 Node.js 的内置模块
    }
  ]
}

本例package.json的 npm script

"scripts": {
    "debug": "node --inspect-brk=9339 ./node_modules/.bin/webpack --watch"
},

webpack 打包流程系列(未完)：
浅析 webpack 打包流程(原理) - 案例 demo
浅析 webpack 打包流程(原理) 一 - 准备工作
浅析 webpack 打包流程(原理) 二 - 递归构建 module
浅析 webpack 打包流程(原理) 三 - 生成 chunk
浅析 webpack 打包流程(原理) 四 - chunk 优化
浅析 webpack 打包流程(原理) 五 - 构建资源
浅析 webpack 打包流程(原理) 六 - 生成文件