笔记标题｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第30天浅尝webpack，第一次配置webpack

这是我参与「第四届青训营」笔记创作活动的第30天

webpack

什么是webpack

前端的所有资源

webpack本质上就是前端的资源打包构建工具，将所有非规范文件编译成浏览器可以运行的js文件

webpack 打包核心流程

示例
entry => Dependencies Lookup => transform => Bundle => output

webpack核心工作流程
1. 入口处理（entry）
2. 依赖解析 (解析entry中对应的require,import等语句找到依赖资源)
3. 资源解析（根据‘module’配置，调用资源转移器，将png, css等非标准js转移成js内容）
4. 资源合并打包（资源合并，优化代码，代码混淆，代码压缩，后输出到output）

关键配置项介绍

配置大致分两类：

流程相关（缺少之后直接导致打包结果）

entry / output 进出口

module 定义loader

css loader

module.exports ={
    module:{
        rules:[
            {
                test:/\.css$/, //检测所有的css文件
                use:['style-loader', 'css-loader'] //使用这两个loader
            }
        ]
    }
}

babel-loader

需要安装 npm install -D @babel/core @babel/preset-env babel-loader

module.exports ={
    module:{
        rules:[
            {
                test:/\.js$/, //检测所有的js文件
                use:[{
          loader:'babel-loader',
          options:{
            presets:[
              ['@babel/preset-env']
            ]	
          }
        }] //使用这两个loader
            }
        ]
    }
}

plugins 定义插件

处理html需要用到插件 , 这个插件会自动生成html文件

npm install -D html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
    plugins:[new HtmlWebpackPlugin()]
}

 2. 工具类相关

    开发效率类型 watch, devtool, devServer

    模块热更新

    ```js
    module.exports = {
        devServer:{
            hot:true , //开启模块热更新
            open: true
        },
        watch: true
    }
    ```

    tree-shaking 去除不需要的代码

    ```js
    module.exports ={
        mode:"development",
        optimization:{
            usedExports: true
    	}
    }
    ```

    其他工具项

    ![](E:\练习\2022青训营\image\Snipaste_2022-08-11_00-52-28.png)

    性能优化类型 cache, performance

    日志类型 stats, infrastructureLogging

loader 组件

常见loader

一般一个loader接受代码的字符串，处理后将代码传给下一个loader, 最后一个loader要求的是webpack能够认识的js代码，在loader中可以直接抛出异常，和处理异步loader的情况
```
export default function(source){
    return source
}
```

最后简单总结一下这次学习：初步的认识loader能更好的了解到webpack是如何工作的，能够真正的进入webpack工作的流程，这是打开webpack的第一步。

笔记标题 ｜ 青训营笔记

webpack

笔记标题｜青训营笔记