了解webpack

1 概念

webpack是一个模块打包工具,他将各种不同类型的文件最终都打包成.js、.css、.png、.jpg4个类型的静态资源。

2 特点

  • 模块化开发

        用webpack之前,项目都是在html中引入一个个js文件来开发;而在webpack中,一切皆模块(js、css、图片、字体、),可以通过import、require来实现模块开发。帮助我们优化代码,提升性能

  • 新语法

        由于js、css等开发语言的语法在逐渐更新, 但浏览器不会实时更新兼容,webpack可以使用预处理器loader(例如less-loader、sass-loader、babel-loader)对文件进行预处理编译(例如less、sass、ES6、TS),这样使开发者更自由方便是使用最新的语法开发。

  • 主流框架脚手架

        一些主流的框架的脚手架(例如vue的vue-cli、react的create-react-app)都使用了webpack,因此可以根据项目需求,自由的配置webpack,从而提升项目性能

  • 扩展性强、插件机制完善

        开发者可以自定义插件、loader

  • 拥有丰富的配置

        依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置

  • 社区庞大,轮子丰富

3 核心用法

3.1 dependency graph(依赖图)

webpack处理应用程序递归构建的一个依赖关系图,核心就是文件之间的直接依赖关系。webpack通过依赖关系图获取非代码资源,比如images或字体,并把他们作为依赖提供给应用程序。

3.2 entry(入口)

依赖关系图的开始,从入口开始寻找依赖,打包构建。(允许多个入口)

默认值是"./src/index.js"

例如:

module.exports = {entry: "index.js"
}

3.3 output(输出)

指定打包的位置和文件名。

默认主要文件是"./dist/main.js"

其他默认文件位置是"./dist"

例如:

const path = require('path');module.exports = {entry: './my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js',},
};

3.4 loader

webpack默认只识别js和json文件,其他类型的文件(如css、ts)需要安装loader处理,webpack将他们转换成模块,同时被添加到依赖图中。

loader属性

  • text - 识别出哪些文件会被转换
  • use - 在进行转换时,应该使用哪个 loader

应用:通过单独定义一个module对象属性,定义rules属性,来配置loader的具体属性

示例:

module.exports = {output: {filename: 'my-first-webpack.bundle.js',},module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }],},
};

3.5 plugin(插件)

插件是用来扩展webpack的工具,正是开发者社区插件的丰富使得webpack的功能更加丰富。

通常在先require引入,然后在plugins数组中定义插件。

示例

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装module.exports = {plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

3.6 mode(模式)

webpack提供了模式的选择(开发模式development、生产模式production、空模式none),可通过在不同环境选择不同的配置模式,让项目性能更优。

不同环境对应修改不同的配置文件(例如webpack.dev.js、webpack.prod.js)

示例:

module.exports = {mode: 'development',
};

3.7 resolve(解析)

resolve用来设置模块如何解析,常用的配置有:

  • alias:配置别名,简化模块引入
  • extensions:在引入模块时可不带后缀
  • symlinks:用于配置 npm link 是否生效(禁用可提升编译速度)

示例

const path = require('path');
function resolve(dir) {return path.join(__dirname, dir);
}module.exports = {resolve: {extensions: ['.js', '.jsx', '.tsx', '.json'],alias: {'@': resolve('src'),},symlinks: false,}
}

3.8 optimization(优化)

根据mode的不同值来自定义不同的webpack的内置优化配置,一般用于生产模式提升性能。

常用的配置项有:(详细的可查看API)

  • minimizer:配置压缩工具(如 TerserPlugin、OptimizeCSSAssetsPlugin)
  • splitChunks:拆分 bundle
  • runtimeChunk:是否需要将所有生成 chunk 之间共享的运行时文件拆分出来

示例

module.exports = {//...optimization: {splitChunks: {// include all types of chunkschunks: 'all',// 重复打包问题cacheGroups:{vendors:{ //node_modules里的代码test: /[\\/]node_modules[\\/]/,chunks: "all",name: 'vendors', //chunks namepriority: 10, //优先级enforce: true }}},runtimeChunk: {name: 'runtime',},},
};

3.9 devServer

帮助我们在代码发生变化后自动编译代码,具有实时重新加载功能。

常用配置项: (详细的可查看API)

  • open:告诉 dev-server 在服务器项目启动后打开浏览器

  • port:本地环境的端口号

  • proxy:API请求代理配置(通过子属性targert设置API地址;默认情况,代理时会保留主机头的来源,可以通过子属性changeOrigin设置为 true覆盖此行为)

  • compress:默认为true。为每个静态文件开启gzip压缩

示例

devServer: {port: 8080,open: true,overlay: {warnings: false,errors: true},proxy: {"/app-config": {ws: false,target: 'http://xx.xx.xx.xx:8080', // 后台接口地址changeOrigin: true},}
}

3.10 cache(缓存)

缓存生成的 webpack 模块和 chunk,来改善构建速度。

他的值在开发模式下会被设置为cache: {type: 'memory'}与cache: true作用一致);

生产模式下会被禁用。 

4 loader配置

项目中会使用到很多loader配置,每个loader对应提供了不同的功能。例如:

        css-loader:会对@import和url()进行处理,就像js解析require和import一样;

        babel-loader:通过babel和webpack将代码转译为js代码;

        sass-loader:将预处理器scss/sass转译成css语法代码;

        style-loader:把css插入到dom中;

        html-loader:将html导出为字符串,在编译器需要时,将压缩html字符串

        ... ... 更多loader配置和使用功能可查看API

配置过程(以css-loader、style-loader为例,二者可串联配置):

1,安装loader的依赖:npm install --save-dev style-loader css-loader

2,修改通用环境配置文件 webpack.commom.js

const paths = require('./paths');module.exports = {module: {rules: [{test: /\.css$/,include: paths.appSrc,use: ['style-loader', // 将JS字符串生成为 style 节点'css-loader', // 将CSS转化成 CommonJS 模块],},]}
}

5 配置图片与字体

webpack5中,可以将images图片和font字体混入到系统中。

加载图片

const paths = require('./paths');
module.exports = {module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,include: paths.appSrc,type: 'asset/resource',},],},
}

加载字体

module.exports = {module: {rules: [{test: /.(woff|woff2|eot|ttf|otf)$/i,include: [resolveApp('src'),],type: 'asset/resource',},]}}

6 高级配置与性能优化

webpack可以通过一些更详细的配置来实现性能优化。例如:

配置cache加快构建时间;

合理拆分chunks、压缩代码等来减小打包体积;

设置按需加载、浏览器缓存等加快加载速度。

具体可参考学习 Webpack5 之路(优化篇)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/599422.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的2023年总结:往前看,别回头

2023年已经结束,我借此机会回顾一下我的2023年,同时也为2024年立好flag。 文章目录 2023印象深刻的实战经历技术成长与规划技术分享与交流CSDN博客参加百度apollo技术讨论会 深入学习Redis源码多彩的生活张杰演唱会《漫长的季节》:往前看&am…

bat批处理文件_输出内容到文本

文章目录 1、echo str > test.txt(覆盖原有内容)2、echo str >> test.txt(不覆盖原有内容,追加) 1、echo str > test.txt(覆盖原有内容) 2、echo str >> test.txt&#xff0…

js根据二进制流获取文件类型

js根据二进制流获取文件类型 在JavaScript中,可以使用FileReader对象来读取二进制数据并判断其文件类型。 下面是一段示例代码: function getFileType(file) {return new Promise((resolve, reject) => {const reader = new FileReader();// 当加载完成时调用onload事件处…

C++64位游戏软件安全汇编与反汇编反调试 x64驱动开发进程保护进程隐藏驱动读写过保护 视频教程

├─课程1 x32dbgx64dbg驱动调试器反反调试器驱动调试环境搭载 │ 1.为什么要搭载驱动调试环境.mp4 │ 2.驱动调试环境搭载1.mp4 │ 3.三种过PG的方法.mp4 │ 4.驱动调试环境搭载2.mp4 │ 5.驱动调试与驱动进程保护对抗.mp4 │ ├─课程2 C64位游戏软件安全汇编与反汇编反…

代码随想录 718. 最长重复子数组

题目 给两个整数数组 nums1 和 nums2 ,返回 两个数组中 公共的 、长度最长的子数组的长度 。 示例 1: 输入:nums1 [1,2,3,2,1], nums2 [3,2,1,4,7] 输出:3 解释:长度最长的公共子数组是 [3,2,1] 。 示例 2&#xff1…

C++ 类和对象 (下)

初始化列表: 之前所说的构造函数初始化严格意义上来说不能叫变量初始化,只能是称为赋初值,C给出了初始化列表的概念 标准写法: class Date { public:Date (int year ,int month, int day):_year(year),_month(month),_day(day)…

C++——stack的基本概念与常用接口

1.stack基本概念 概念:stack是一种先进后出(First In Last Out,FILO)的数据结构,它只有一个出口 图形剖析: ____________________________栈底 | | 数据元素 | || |________________________| || | 数据元素 | || |________________________| || | 数据元…

如何用离散二维卷积公式描述卷积过程(说实话,我没搞懂为什么索引为什么设置成对称的模式。)

问题描述:如何用离散二维卷积公式描述卷积过程(说实话,我没搞懂为什么索引为什么设置成对称的模式。) 众所周知,描述图像卷积过程,可以使用图形法描述,也可以用公式法描述,但是具体用…

ubuntu vi 方向键乱码问题解决方案

方向键乱码问题解决方案 这个其实很简单 只需要在终端输入apt-get install vim 待安装完成就可以了

第十课:计算机心理学、教育科技及奇点,天网,计算机的未来

第十课:计算机心理学、教育科技及奇点,天网,计算机的未来 第三十八章:计算机心理学0、计算机中用到的心理学原理1、易用度2、颜色强度排序和颜色排序3、分组更好记4、直观功能5、认出VS回想6、让机器有一定的情商以及Facebook的研…

新兴电商平台都有哪些?新手做哪个比较盈利?

我是电商珠珠 近年来的电商平台层出不穷,由于购物方式发生了改变,传统的电商模式已经不能满足当前人们的需求,所以在抖音推出电商-抖音小店后,让整个电商圈发生了全新的改变。 抖音小店的出现顺势将直播电商带了起来&#xff0c…

计算机研究生论文检索方法汇总

计算机研究生论文检索方法汇总 作为一名优质(冤种)计算机在读研究生,检索论文是一项不可或缺的技能之一。 一、paperwithcode paperswithcode是一个免费开放的资源平台,提供了机器学习领域的论文、代码、数据集、方法和评估表。在这里我们可以检索不同…

Python|使用Missingno库可视化缺失值(NaN)

在真实世界数据集的情况下,数据集中的某些值丢失是非常常见的。我们将这些缺失值表示为NaN(非数字)值。但是要构建一个好的机器学习模型,我们的数据集应该是完整的。这就是为什么我们使用一些插补技术来用一些可能的值替换NaN值。…

C语言多线程编程-线程同步

介绍 多线程编程,经常会遇到线程直接数据同步,为了保证数据访问安全,就必须考虑线程之间的同步问题。在C语言中,多线程编程的线程同步主要依赖于POSIX线程(Pthreads)库提供的同步原语。以下是一些关键的线…

DevOps(6)

目录 26.如何在Linux下跨不同的虚拟桌面共享程序? 27.无名(空)目录代表什么? 29.什么是守护进程? 30.如何从一个桌面环境切换到另一个桌面环境,例如从KDE切换到Gnome? 26.如何在Linux下跨不同的虚拟桌面…

你的网站或许不需要前端构建(二)

前一阵,有朋友问我,能否在不进行前端编译构建的情况下,用现代语法开发网站界面。 于是,就有了这篇文章中提到的方案。 写在前面 这篇文章,依旧不想讨论构建或不构建,哪一种方案对开发更友好,…

JavaScript实现大整数加法

实现大整数加法 即两个数字字符相加,采用按位加法实现 方法 const add (a, b) > {let i a.length - 1;let j b.length - 1;let carry 0;let ret "";while (i > 0 || j > 0) {let x 0;let y 0;let sum "";if (i > 0) {x …

《工具录》NetCat

工具录 1:NetCat2:选项介绍3:示例3.1:正向连接(被动连接)3.2:反向连接(主动连接)3.3:信息收集3.4:文件传输 4:其他 本文以 kali-linux…

MySQL——视图

目录 一.视图介绍 二.基本使用 三.视图规则和限制 一.视图介绍 视图是一个虚拟表,其内容由查询定义。同真实的表一样,视图包含一系列带有名称的列和行数据。视图的数据变化会影响到基表,基表的数据变化也会影响到视图。 二.基本使用 创…