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

Webpack 知识体系

什么是 Webpack?

webpack是前端资源编译、打包的一种工具

webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

优势：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

webpack 的核心工作流程

webpack 的使用

安装 npm i -D webpack webpack-cli

编辑配置文件 webpack.config.js

配置分为两类：流程类和工具类

流程类

作用于流程中某个或若干个环节，直接影响打包效果的配置项

工具类

主流程之外，提供更多工程化能力的配置项

编译 npx webpack

Loader

Webpack只能识别符合JavaScript规范的文件，即Webpack只能识别文件后缀为.js的文件，而Loader的存在就是来解决这一问题。Loader 是一个内容转换器

// webpack.config.js
module.export = {
    module: {
        rules: {
            /* test用来匹配需要转换的文件后缀，use用来设定该文件的内容转译工作流，从后往前依次执行*/
            test: /\.less$/,
            use: ["style-loader","css-loader","less-loader"]
        }
    }
}