淘先锋技术网

首页 1 2 3 4 5 6 7

webpack.........

webpack是一个静态资源打包工具，除此之外还有parcel，rollup，还有vue3常常用的vite

然后webpack的话他有五大概念入口，出口，加载器（处理其他资源如，css，sass，less，还有就是图片在webpack5集成到里面了不用处理），插件拓展webpack功能用的，还有模式分为两种生产模式，开发模式，开发模式就是编写代码，生产模式会压缩代码，但是public中的不会被压缩，自己webpack配置项目的话我一般把index.js放在这引用，然后就是加载器处理多种文件用的比如说 css-loader npm i css-loader ，匹配.css结尾文件，配置其他比如说style-loader，这里注意loader顺序从右到左，还有一些其他loader这里我就不赘述了，然后就是dev-serve 配置在基本概念平级，然后配置端口域名，自动打开，插件的话比如说eslint，在日常开发比如说vue的eslint，是用来处理js，经检查错误，babel-loader因为高级转低级

再比如说处理html资源的话，也有插件

再有就是webpack优化项目

开发体验

sourcemap 是一个映射文件 一般来说生产模式和开发模式两种，可以方便我们找错误，生产行列映射，行映射

打包速度

1.热替换，只在次打包变化文件，实际中vue-loader会自带所以不需要

2.加载loader时用oneof只会一个匹配，不会看下面

3.include/excluce排除选定哪些模块

代码体积

tree shank 自动就有，没用不加载

image-minimizer-webpack-plugin 压缩本地图片

运行性能

多入口，按需加载，分割成多个js文件

mst

基本功能

代码转换，文件优化打包，模块合并，自动刷新，校验，解决命名冲突

构建过程

1. 从entry里配置的module开始递归解析entry依赖的所有module
2. 每找到一个module，就会根据配置的loader去找对应的转换规则
3. 对module进行转换后，再解析出当前module依赖的module
4. 这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
5. 最后Webpack会把所有Chunk转换成文件输出在整个流程中Webpack会在恰当的时机执行plugin里定义的逻辑

总结

我们从 4 个角度对 webpack 和代码进行了优化：

  1. 提升开发体验
  • 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。
  1. 提升 webpack 提升打包构建速度
  • 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
  • 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。
  • 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。
  • 使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。
  • 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）
  1. 减少代码体积
  • 使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。
  • 使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。
  • 使用 Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）
  1. 优化代码运行性能
  • 使用 Code Split 对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。
  • 使用 Preload / Prefetch 对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。
  • 使用 Network Cache 能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。
  • 使用 Core-js 对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。
  • 使用 PWA 能让代码离线也能访问，从而提升用户体验。



处理图片资源 | 尚硅谷 Web 前端之 Webpack5 教程 (yk2012.github.io)

基础

1，概念

webpack是一个静态资源打包工具，浏览器只可以处理js代码，甚至稍微高版本js代码都处理不了，webpack本身功能很少需要配置一些loader或pluging来扩展功能。

使用webpack优点

1.所有静态资源都可以堪称模块非常非常方便

2.自动引用可以解决依赖冲突，命名问题

3.dev-serve保存就运行，提高效率

4.处理不兼容问题

webpack输出的文件叫bundel

2.基本配置结构

 js文件夹暴露两个函数，main引入，打包默认输出dist 

 3.webpack配置项核心概念

如果我们需要自定义webpack的各项功能包括，安装一些加载器插件就需要，webpack的配置

webpck的五大核心概念

entry //入口

output //出口

loader //加载器 

这个是这么写加载器写在rules里

// 加载器
  module: {
    rules: [],
  },

plugin //插件

mode //模式


const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname,
      "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

根目录下建webpack.config.js,配置代码如上

注意必须配置完webpack.config.js才可以直接使用npx webpack，否则npx webpack ./src/main.js --mode=development 需要告诉全

运行webpack   npx webpack（未使用webpack-dev-server）

 4.webpack的模式

  • 开发模式：代码能编译自动化运行
  • 生产模式：代码编译优化输出
  • 开发模式：可以编译 ES Module 语法
  • 生产模式：可以编译 ES Module 语法，压缩 js 代码

总的来说开发模式是我们编写代码的模式，生产模式是要上线代码会优化压缩，以下会先以开发模式讲解

注意上次打包在开发模式中dist不会自动更新需要，下面放到output中

 clean: true, // 自动将上次打包目录资源清空

5.我决定先说webpack-dev-serve

用过vue2脚手架都知道保存会自动编译运行用的就是这个

首先下载

npm i webpack-dev-server -D

然后配置devsever 他和五项基本在同一级

 自动打开同时也就是在这配置

这时就可以自动编译运行了。同时命令变成npx webpack serve

这时候没有界面看不到也可以看完下面的css再看这个

6.处理css资源（loader）

首先添加css资源引入main.js才可以打包，public下整个界面，引入打包好的main.js

1.全部完成后未安装css loader

 安装cssloader

 npm i css-loader style-loader -D 安装

 配置

处理sass和less差不多安装几个loader

7.处理图片资源（loader）

在webpack5中图片loader已经内置了 

 写明白匹配的正则

开启type

......

8.eslint（插件）

  new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),

9.bable（loader）

10.html资源

11.模式分开配置

生产模式

12，css闪屏处理安装mini-css插件 

 变成link