拉勾教育训练营学习笔记--webpack打包

1、快速上手

npm init -y

npm i webpack webpack-cli

webpack

webpack配置文件

// webpack.config.js
// 导出一个对象
module.exports = {
    entry: '',
    oupput: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'output'), // 输出目录：绝对路径
    }
}
// 导出一个函数
let config = {}
module.exports = (env, argv) => {
    if (argv.mode === 'development') {
        config.devtool = 'source-map';
    }
    if (argv.mode === 'production') {
        //...
    }
    return config;
}

3、工作模式：mode

modehttps://webpack.docschina.org/configuration/mode/https://webpack.docschina.org/configuration/mode/

•  production（默认）：生产模式
•  development：开发模式
•  none：不使用任何默认优化选项

// 配置文件
module.exports = {
  mode: 'development',
};
// cli
webpack --mode=development

4、打包结果运行原理

• 输出的是一个立即执行函数，接受一个modules参数，调用时传入一个数组
  • 数组每个元素都是一个函数，对应源代码的每一个模块，实现模块的私有作用域
• 立即执行函数内部
  • 定义一个对象用于缓存加载过的模块
  • 定义一个`__webpack_require__`函数，用于加载模块
    • 判断模块是否加载过，加载过则读取缓存
    • 创建新的对象
    • 调用模块对应的函数，传入模块对象、模块导出对象、__webpack_require__函数
  • 在`__webpack_require__`上挂在一些数据、工具函数
  • 调用`__webpack_require__(0)`

5、资源模块加载

添加相应的`loader`处理非JS文件

• `css-loaser`将css文件打包成一个模块，如果需要使用可使用`style-loader