当前位置: 首页 > news >正文

一、webpack基础

webpack基础

一、webpack是什么

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

说白了webpack就是一个构建和管理静态资源的工具,在我们使用框架开发时,它会在我们内部的一个或者多个入口根据我们引入的各个模块将他们根据一定的规则都处理成一个个的静态资源文件,从而方便我们进行引入使用。

依赖图如下:
在这里插入图片描述

二、webpack优缺点

优点:

  • 模块化开发。在webpack中所有的资源都可以模块化(js, css, image等),可以更方便的管理,迁移和开发。
  • 语法编译。可以很方便的将浏览器不支持的语法(es6, jsx等等)借助其他loader进行按需编译,预处理等。
  • 社区完善。扩展能力强,有丰富的插件并且支持自己编写插件和loader。
  • 项目优化。因为有了上述这些有点和功能所以它可以更好的支持我们对项目进行优化(动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存配置等)。

缺点:

  • 配置繁琐。
  • 项目复杂时打包较慢。
  • 对服务端渲染不友好

三、webpack基础概念

1、模式(mode)

mode可以设置webpack在构建时的模式 生产模式和开发模式,当选择模式后,webpack自身会根据自动开启一写内置的功能。

默认值为 production。

如:

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

2、入口(entry)

entry设置webpack从哪个文件开始进行打包,并收集依赖项。

可以设置多个入口。

如:

module.exports = {entry: './path/to/my/entry/file.js',
};

3、出口(output)

output告诉webpack在哪里输出打包好的文件,以什么样的方式命名这些输出的文件等。

默认值是 ./dist/main.js。

如:

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

4、loader

webpack 本身只能理解 JavaScript 和 JSON 文件,但是项目中还会遇到其他的文件(如css, less等)这个时候就需要使用loader去处理这些文件,并将他们输出为可以使用的资源。

它有两个属性:

  • test: 匹配哪些要处理的文件。
  • use: 在处理文件时应该使用哪些loader。

如:

const path = require('path');module.exports = {module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }],},
};

5、插件(plugin)

loader用于解析和处理文件,plugin则是为了扩展webpack的能力,可以进行 打包优化、资源管理、注入环境变量等等。

如:

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

6、解析(Resolve)

resolve用来对webpack设置文件扩展名、目录别名等等。

如:

module.exports = {resolve: {extensions: ['.js', '.jsx', '.json']},
};

7、优化(Optimization)

optimization用来设置webpack的内置优化性能优化,如代码分割、代码压缩等。

如:

module.exports = {optimization: {splitChunks: { },minimizer: [ ],},
};

四、总结

webpack本质上是一个静态资源模块打包工具,我们自己指定需要打包文件的入口,并且设置一定的规则,然后它就会从入口文件开始根据引入的依赖项将所有的资源构建出一个依赖图,在根据设置规则输出处理后的静态资源文件输出到我们指定的目录里面。

但是它本身只能解析js和json文件,我们在处理其他文件时需要手动的去设置去引入其他的插件才能完成我们想要的处理结果。

http://www.lryc.cn/news/32576.html

相关文章:

  • 超详细VMware CentOS7(最小安装)安装教程
  • 经典卷积模型回顾8—NIN实现图像分类(matlab)
  • 【Java笔记】泛型
  • 【Linux】用户管理
  • 深入理解Mysql索引底层数据结构与算法
  • 【SpringBoot高级篇】SpringBoot集成jasypt 配置脱敏和数据脱敏
  • JAVA知识体系(二)
  • Verilog 学习第八节(数码管段码显示)
  • 方案开发|快递吊钩电子秤方案
  • Spring-IOC容器初始化过程
  • AspCms标签手册
  • 什么是Netty
  • SpringCloud:统一网关Gateway
  • 【独家】华为OD机试 - 最差产品奖(C 语言解题)
  • ​力扣解法汇总1599. 经营摩天轮的最大利润
  • MySQL-常见的五种索引
  • Linux学习第二十三节-压缩和解压缩和tar打包工具
  • 没有钱怎么创业?一分钱没有如何能创业成功?
  • 【操作系统原理实验】银行家算法模拟实现
  • java医院云HIS系统:融合B/S版电子病历系统 能与公卫、PACS等各类外部系统融合
  • 单线激光雷达(SICK)驱动安装及时空标定
  • Java IO流
  • LeetCode - 1653 使字符串平衡的最少删除次数
  • 【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
  • 《超导电子技术及其应用》学习日志(二)
  • 微信小程序this指向问题
  • 【报错】paddle相关报错和处理方法
  • unity的安装配置和第一个游戏-unity开学第一课
  • Elsevier上传LaTeX 修改稿踩坑
  • 秒懂算法 | 搜索基础