webpack打包

模块化打包工具

引入原因：

• ESM存在环境兼容问题
• 模块文件过多，网络请求频繁
• 所有的前端资源都需要模块化

解决问题：

• 新特性代码编译
• 模块化js打包
• 支持不同类型的资源模块

工具：

• webpack 模块打包，代码拆分，资源模块载入

快速上手

1. 初始化文件yarn init
2. 安装核心模块yarn add webpack webpack-cli
3. 执行打包yarn webpack 顺着src下的index.js开始打包
4. 在项目根目录下生成一个dist文件夹，打包后的js文件存在里面main.js
5. 可以通过在package.json添加scripts中添加build命令，可以简化打包命令

// package.json
{
    ...,
    "scripts": {
        "build": "webpack"
    }
}

配置文件

webpack.config.js运行在node环境下的commonJS模块

const path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js', // 输出文件名
        path: path.join(__dirname, 'output'), // 输出目录，绝对路径
    }
}

工作模式

• producation默认
• development
• none

yarn webpack --mode development或者在配置文件中添加mode属性

打包结果运行原理

整体生成的是一个立即执行函数