Webpack

已于 2022-07-27 15:57:06 修改
阅读量69 收藏
点赞数
分类专栏： 复习 文章标签： webpack 前端 node.js
于 2022-06-13 10:05:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46222031/article/details/123434331
版权

简介

webpack是一个静态资源打包工具，会以某个文件为入口，将所有文件编译组合成一个或多个文件输出，让其能够在浏览器运行。

其本身功能非常局限，两种模式

1、开发模式：编译js

2、生产模式：编译js，压缩js

webpack五大核心概念

  1. 入口
  2. 输出
  3. 加载器
  4. 插件
  5. 模式

配置文件

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

常用

 处理各种资源

  1. 样式资源：
    1. 加载
      1. css-loader，
      2. style-loader，
      3. less-loader，
      4. sass-loader
    2. 优化
      1. 提取css为单独文件：MiniCssExtractPlugin
      2. 兼容性处理：postcss-loader
      3. 压缩：CssMinizerPlugin
  2. 图片资源：file-loader，url-loader（现在用type：asset，其中加入parser{dataUrlConditon来压缩}）
  3. 音频视频等：type：asset/resource
  4. js资源：
    1. Eslint插件（需要配置文件，直接extends属性用写好的）
    2. Babel-loader（需要配置文件，以及preset插件）
  5. html资源：HtmlWebpackPlugin（需要配置模板文件）

优化

  1. 提升开发体验
    1. webpack-dev-derver：开发服务器，自动化（需要在对象中加入devServer配置项）
    2. SourceMap：开启映射，
      1. 生产模式：devtool：“source-map”
      2. 开发模式：devetool：“cheap-module-source-map”
  2. 提升打包构建速度
    1. HMR：修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变
      1. css开启：devServer中添加hot
      2. js开启：vue-loader
    2. OneOf：

      匹配上一个 loader, 剩下的就不匹配了（oneOf包裹所有处理相同文件的配置项）

    3. inClude/Exclude：匹配什么路径

    4. Cache：Eslint，Babel开启缓存

      1. babel：

         options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            }

      2. Eslint：

        new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    })

  3. 减少代码体积

    1. 压缩图片：ImageMinizerPlugin

    2. Babe按需引入：@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用

  4. 优化代码性能

    1. Code SPlit：在统一与拆分中取得均衡

      1. 功能

        1. 分割文件

        2. 按需加载

      2. 使用：对象中加入

          optimization: {
    // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割

      },
  }

    2. Preload

      1. preload插件，允许预先加载资源（new PreloadWebpackPlugin）

    3. PWA

      1. 支持离线功能（通过service Woekers实现）

      2.  new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),

生产模式

webpack不能识别样式资源，需要借助loader来帮助webpack解析样式资源。

1、需要引入两个loader

loader：可以帮助识别更多的文件

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

2、module的数组中添加配置项reules【】

  1. test：匹配规则
  2. use: 使用的loader
  3. type：内置的loader
  4. parser：支持各种高级转换（转base64）
  5. generator：选择文件的输出路径和名称
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
            dataUrlCondition: {
                // 小于10kb的图片转base64
                // 优点：减少请求数量  缺点：体积会更大
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
            filename: "static/imgs/[hash:8][ext][query]",
       
            },
        }
    ],
  },
  plugins: [],
  mode: "development",
};
  1. type: "asset/resource"  将文件转化成 Webpack 能识别的资源，其他不做处理，处理各种各样的资源
  2. type: "asset" 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成base64（parse）

处理js资源

  1. eslint
    1. 创建.eslintrc.js（配置项）/eslintignore 
      1. module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  // parserOptions 解析选项
  parserOptions: {
    ecmaVersion: 6, // es6
    sourceType: "module", // es module
  },
  // 定义规则
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};
    2. 在插件中使用 
      plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],

2、Babel（loader）

1、babel.config.js （配置文件）

module.exports = {
  // 预设
  presets: [],
};
@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设
#3. 在 Webpack 中使用

2、在loader中使用

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
   
  ],
  mode: "development",
};

处理html资源

自动引入打包的js和css资源

htmlwebpackPlugin （插件）

1、下载引入

2、使用

plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],

开发服务器

为了防止每次都得打包，引入了这个插件，搭建了服务，时时刻刻自动打包。

开发环境没有输出，直接在内存中打包。

生产模式

CSS提取单独文件

MiniCssExtractPlugin

提取文件再用link引入

1、下载

2、配置

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

兼容性处理

postcss

（use【】：直接使用是默认配置项，像自定义配置需要写成对象形式）

1、下载插件

2、在package.json中

browsersList【】

3、在配置项中加入

rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },

css压缩（插件）

1、安装

CssMinimizerPlugin

2、配置

plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],

江江春
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包
06-06
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
webpack
03-09
webpack
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack配置
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack看这一篇就够了
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
浅析webpack的原理
wsx1212123的博客
03-15 8528
一、前言 ​ 现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。 在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 二、webpack的原理 知其然知其所以然。 1、核心概念 （1）entry：一个可执行模块或者库的入口。 （2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一
webpack stats
qq_41402809的博客
04-22 1611
什么是stats stats 主要包含了webpack在编译源代码时的一些模块统计信息。这些统计数据可以用来分析应用程序的依赖关系图，也可以用来优化编译速度。 webpack 有一些特定的预设选项给stats 输出： 预设 可选值 描述 ‘errors-only’ none 只在发生错误时输出 ‘errors-warnings’ none 只在发生错误或有新的编译时输出 ‘minimal’ none 只在发生错误或新的编译开始时输出 ‘none’ false 没有输出 ‘no
初识webpack
kgjfk的博客
02-22 1043
初识webpack 1.webpack是什么？ webpack是一个模块打包工具，推出之初是专为js打包而设计，随着前端的发展和技术的更新，webpack的功能也越来越完善，现在已经发展为可识别任何引入模块。 2.什么是webpack-cli？ webpack的安装和运行都是通过命令来实现，而webpack-cli就相当于一个管家，对webpack的命令进行管理和检查，只有webpack-cli识别的命令才能起作用。 3.通过命令安装webpack 安装webpack之前，我们需要先在终端输入node -v
webpack基本的配置
读心悦
07-06 2993
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack demo
07-13
webpack demo
webpack.md
02-27
自学webpack 笔记 webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的...
webpackDemo
08-23
依据webpack官方文档，指南手册整合得demo，让你充分了解打包得全过程。
webpack文档
07-05
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有...
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack.zip
01-28
1.webpack 分享PPT 2.loader demo 3.plugin demo 4.webpack常用配置demo 5.bapable实现demo
webpack config
最新发布
05-18
Webpack是一个现代化的JavaScript应用程序打包工具。Webpack 可以将多个 JavaScript 文件打包成一个文件，同时还可以将 CSS、图片等资源也打包到一起。Webpack 的配置文件是 webpack.config.js，它是一个 CommonJS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值