webpack 知识体系基础

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

1、什么是webpack

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

webpack本身默认只对JavaScript文件进行处理，其他类型的文件需要配置loader或者plugins进行处理；

webpack将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求

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

2、Webpack 的用法

2.1 运用流程

1.安装 Webpack：

npm i -D webpack webpack-cli

2.编辑配置文件

// webpack.config.js
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: "[name].js",
            path: path.join(__dirname,"./dist"),
        },
        module: {
           rules: [{
               test: /\.less$/i,
               use: ['style-loader','css-loader','less-loader']
           }], 
        }
    }

3.执行编译命令：

npx webpack

会在根目录的 dist 文件夹下得到编译出的打包文件 main.js

核心流程：入口处理、依赖解析、资源解析、资源合并打包

2.2 Webpack 本质上完成的事情：模块化 + 一致性

-   多个文件资源合并成一个，减少 HTTP 请求数
-   支持模块化开发
-   支持高级JS特性
-   支持 typescript、CoffeeScript 语言
-   统一图片、CSS、字体等其他资源的处理模型

3、webpack 使用方法

关于 Webpack的使用方法，基本都围绕配置展开，而这些配置大致可划分为两类:

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

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

流程类配置

使用示例

文件结构：

1、声明入口entry

module.exports = {
entry: "./src/index"
};

2、声明产物出口output

const path = require("path");
module.exports = {
  entry: "./src/index",
  output: {
    filename : "[name].js",
    path: path.join(__dirname, "./dist")，
  }
};

3、运行npx webpack

loader

webpack可以处理js代码，并且webpack会自动处理js之间相关的依赖；

但是，在开发中不仅仅只有基本的js代码需要被处理，也需要加载css、img、也包括将一些高级的ES6的转化成ES5、将ts转化成es5，将scss、less转化成css、将.jsx，.vue转化成js文件；

对于webpack本身的能力来说，这些转化是不支持的；

解决：给webpack扩展对应的loader

1、通过npm安装所需要的使用的loader

npm add -D css-loader style-loader

2、添加module处理

const path = require("path");
module.exports = {
  entry: "./src/index",
  output: {
    filename : "[name].js",
    path: path.join(__dirname, "./dist")，
  },
  module: {
// css处理器
  rules: [{
    test: /\.css/i,
    use: [
      "style-loader",
      "css-loader"
      ],
  }],
},
};

Loader 的特性：
- 链式执行（前一个 loader 的输出可能是另一个 loader 的输入）
- 支持异步执行
- 分为 normal 和 pitch 两种模式

Tree-Shaking

Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）

在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 Tree-Shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

开启Tree-shaking:

module.exports = { 
  entry:"./src/ index",
  mode: "production",
  devtool: false,
  optimization: {
  usedExports: true,
 },
}

webpack 知识体系基础 | 青训营笔记