了解webpack知识体系 | 青训营笔记

这是我参与[第四届青训营]笔记创作活动的第7天

一、什么是webpack？

webpack是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
它的主要功能是其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。
认识了webpack是什么，那么，如何使用webpack也是我们需要了解的一个必要知识，下面是如何使用webpack。

二、如何使用webpack?

关于webpack的使用方法。基本都围绕“配置”展开，而这些配置大致可分划分为两类：
流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项；工具类：主流程之外，提供更多工程化能力的配置下
流程类配置：微信图片_20220830220200.jpg

微信图片_20220830215611.jpg 下面是webpack的安装以及配置过程
首先，安装webpack，可以是局部安装，也可以是全局安装；

全局：cnpm install -g webpack
局部：cnpm install --save-dev webpack

然后创建package.json文件，NPM的标准说明文件，包含项目的基本信息、模块依赖、运行的脚本信息；

cnpm init -y

接着创建webpack.config.js文件——webpack的配置文件，需手动创建，可在任何位置，一般在整个文件夹的首层子目录；

webpack.config.js文件：
module.exports = {
  entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

然后需要写一个入口文件main.js；
最后执行打包，运行webpack命令，即可执行webpack.config.js；npm的start命令是个特殊的命令，可直接执行npm start，一般情况下执行脚本命令的格式是 npm run {script name}，比如npm run bulid。
2.1 webpack的打包原理
webpack由四个核心概念：入口(entry)、出口(output)、loader、插件(plugins)。
entry：表示webpack打包开始的入口文件。
output：标识webpack打包结束的导出文件（路径和文件名）。
loader：转换非JavaScript文件（webpack只能识别js文件），如Typescript、css、scss等，可配置对某一文件类型做具体的loader转化。
plugins：可以执行范围更广的任务
module：可以选择development和production模式，webpack内部会进行相应的优化。
2.2 使用webpack处理CSS

安装两个loader模块,css-loader和style-loader；

yarn add css-loader style-loader -D

安装完成之后，在webconfig.js文件中进行配置；

const path = require("path");
module.exports = {
  entry:"./src/index",
  output:{
    filename:"[name].js",
    path:path.join(__dirname,"./dist"),
  }
    module: {       // CSS处理器
        rules: [{
                test: /\.css/i,   // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ],
        }],
    },
};

打包配置.less文件需要安装两个模块less less-loader。

yarn add less less-loader -D

配置如下：

    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css/i,     
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'  // less-loader将less语法转成常规的css语法
                ]
            }
        ],
    }

webpack可以把css代码抽离为单个文件。抽离单个文件需要使用mini-css-extract-plugin

yarn add mini-css-extract-plugin -D

2.3 使用webpack接入Babel

安装webpack接入babel必须依赖的模块

  npm install --save-dev babel-core babel-loader

babel-core负责解析JS代码，将代码分析成抽象语法树，方便其他插件分析语法进行相应的处理。babel-loader负责在webpack中转换JS代码。根据需求选择不同的plugin或preset

npm install --save-dev babel-preset-env

每个plugin可以转换特定的新语法，而preset是一组plugin的集合，可以转换一组新语法的特定。这里我们直接安装babel-preset-env，它可以转换当前所有ES标准里的新特性。
配置.babelrc
在项目根目录下新建.babelrc文件，并配置：

{
    "plugins": ["transform-runtime"],
    "presets": ["env"]
}

.babelrc文件是一个JSON格式的文件，在Babel执行编译的过程中，会从项目根目录下的.babelrc文件读取配置。
修改webpack配置文件
在项目的根目录下新建webpack.config.js，并添加对babel的配置

  module: {
      rules: [
        {
            test: /\.js$/,
            use: ['babel-loader'],
            exclude: /node_modules/
        }
      ]
  }

修改package.json
在package.json的scripts字段中添加新的字段，用于启动webpack。

  {
      "scripts": {
          "start": "webpack --config webpack.config.js"
      }
  }

三、深入了解Loader

Webpack Loader 最核心的只能是实现内容转换器 —— 将各式各样的资源转化为标准 JavaScript 内容格式。loader从本质上来说其实就是一个node模块。

css-loader 将 css 转换为 __WEBPACK_DEFAULT_EXPORT__ = ".a{ xxx }" 格式；
html-loader 将 html 转换为 __WEBPACK_DEFAULT_EXPORT__ = "<!DOCTYPE xxx" 格式；
vue-loader 更复杂一些，会将 .vue 文件转化为多个 JavaScript 函数，分别对应 template、js、css、custom block；\

3.1 常见的loader

file-loader: 文件加载；
url-loader：文件加载，可以设置阈值，小于时把文件base64编码
image-loader: 加载并压缩图片
css-loader：处理@import和url这样的外部资源
style-loader：在head创建style标签把样式插入
. postcss-loader: 扩展css语法
less-loader：实现less=>css的转换

3.2 loader编写原则：

单一原则: 每个 Loader 只做一件事；
链式调用: Webpack 会按顺序链式调用每个 Loader；
统一原则: 遵循 Webpack 制定的设计规则和结构，输入与输出均为字符串，各个 Loader 完全独立，即插即用；

3.3 loader的特点

链步执行；
支持异步执行；
分normal、pitch两种模式；

四、总结

通过学习webpack的基础知识，了解了webpack的安装、配置，还有明白了如何通过webpack去处理css以及接入babel；对loader有了更深的理解，基本会去编写loader。

\