前端构建工具-webpack

webpack功能
模块化支持、代码压缩混淆、处理js兼容问题、性能优化

什么是webpack？

本质上，webpack是javascript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
webpack像一条生产线，经过一系列处理流程后将源文件转换为输出结果；每个处理流程都是单一作用，多个流程之间存在依赖关系，只有完成当前的流程才能继续处理下一个流程。

webpack构建流程

1. 初始化参数：从配置文件
2. 开始编译：加载所有配置的插件，执行对象的run方法开始编译
3. 确定入口：根据配置文件的entry找到所有的入口文件
4. 编译模块：从入口文件出发，调用所有配置的loader对模块进行翻译，再找出模块的依赖模块，递归完成本步骤，直到所有入口依赖文件都经过编译处理
5. 完成编译模块：得到每个模块翻译之后的最终内容，以及之间的依赖关系
6. 输出资源：根据模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个chunk转换为一个单独的文件加入到输出列表。这是最后可以修改输出内容
7. 输出完成：根据配置确定输出路径和文件名，把文件写入到文件系统

webpack加载器的使用loader

• 1.打包处理css文件
  1）安装loader： npm install style-loader css-loader -D
  2）在webpack.config.js配置文件中添加：

  module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
    test:表示匹配的文件类型  use：表示对应要调用的loader（顺序是固定的，从后往前调用）

• 2.打包less文件
  1）npm i less-loader less -D
  　
  ２）{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] }

• 3.打包scss文件

• 4.配置postCSS自动添加css的兼容前缀

• 5.打包样式表中的图片和字体文件

{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=16940" }

    limit指定图片的大小 只有小于limit大小的图片，才会被转为base64图片

• 6.打包js文件中的高级语法

1）安装babel转换器相关的包
2）安装babel语法插件相关的包
3）创建babel配置文件babel.config.js
4）添加loader规则