Webpack学习｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天，欢迎各位大佬批评指正。

前端工程化

前端项目由很多种资源构成，比如：JS、CSS、HTML、Vue、JSX、TS、PNG、JPG、MP4...这些大量的文件会造成管理资源困难，手动管理当然可以但是非常影响效率，也会产生各种各样意想不到的Bug。

为了解决上述问题，Gulp、Rollup、Webpack、Vite等构建工具逐步诞生，大大强化了前端工程化的发展。让前端开发人员从手段管理资源的困境中脱离出来，大大加强了开发过程中的自动化，使得前端也可以写非常复杂的页面而不必担心资源过多管理混乱的问题。

Webpack作为前端构建工具的中流砥柱，到现今仍是最主流的前端打包、构建工具；因此掌握Webpack对今后学习有极大帮助。

Webpack 基本用法

Webpack本质上其实是一种前端资源编译、打包工具。

• 多份资源打包成为一个Bundle
• 支持Babel、ESLint、TS、Less、Sass等
• 支持模块化处理CSS、图片等资源文件
• 支持 HMR + 开发服务器
• 支持持续监听，持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap
• ...

安装

npm i -D webpack webpack-cli

编辑配置文件

module.exports = {
    //定义入口文件
    entry: 'main.js',
    
    //定义输出文件
    output: {
        filename: '[name].js',
        path: path.join(__dirname, './dist'),
    },
    
    //使用loader
    module: {
        rules: [{
            test: /\.less$/i,
            use: ['style-loader', 'css-loader', 'less-loader'],
        }]
    }
}

执行命令

npx webpack

Webpack 核心流程

Webpack 关键知识点

Loader

理解 Loader

Loader其实就是做内容转化，因为Webpack只认识JS语法，因此对于其他文件会需要进行语法转换。因此：Loader最核心功能就是把其他资源转换为JS资源。

使用 Loader

1. 安装 Loader

npm add -D css-loader style-loader less-loader

2. 添加module匹配处理CSS文件

module: {
    rules: [{
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
    }]
}

Ps: Loader可能会链式调用，支持异步执行，分为normal、pitch两种模式。

常用 Loader

思考题

1. Loader的输入输出是什么？

2. Loader链式调用是什么？如何串联多个Loader？

3. Loader如何处理异步场景？

Plugin

理解 Plugin

插件 在很多工具中都有应用，比如Vscode、Webstorm、Chrome、Vue、Babel... 这么多应用都采用了插件架构，根本原因在于项目代码过于庞大，学习成本过高，因此为了开源更好维护生态，便采用这样一个架构。插件架构的精髓在于对扩展开放，对修改封闭。

Webpack的很多核心功能都是依靠插件来实现。

使用 Plugin

1. 安装 Plugin

npm i -D webpack-dashboard

2. 引入 Plugin

const DashboardPlugin = require("webpack-dashboard/plugin");

3. 添加 Plugin配置项

module.exports = {
    // ...
    plugin: [new DashboardPlugin()];
    // ...
};

思考题

1. Plugin和Loader异同点？

2. 钩子 有什么作用，如何监听 钩子 函数？