淘先锋技术网

首页 1 2 3 4 5 6 7

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