webpack默认打包
我们可以通过webpack进行打包,之后运行打包之后的代码
在目录下直接执行webpack命令 使用的是全局的webpack
- 之后生成一个dist文件夹,里面存放一个main.js的文件,就是我们打包之后的文件
- 这个文件中的代码被压缩和丑化了;
webpack是如何确定我们的入口?
- 我们运行webpack时,webpack会查找当前目录下的 src/index.js作为入口;
- 所以,如果当前项目中没有存在src/index.js文件,那么会报错;
通过配置指定入口和出口 npx webpack --entry ./src/main.js --output-path ./build
Webpack配置文件
在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。
我们可以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件:
- 继续执行webpack 命令 仍然可以正常打包
指定配置文件
如果配置文件不是webpack.config.js那么需要执行指令
- 比如我们将webpack.config.js修改成了 wk.config.js
- 那么需要执行指令
webpack --config wk.config.js
- 并且可以通过在package.json中添加脚本
1
2
3"scripts"{
"build":"webpack --config wk.config.js"
}执行npm run build 来打包即可
webpack依赖图
事实上webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件;
从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、
字体等);
然后会遍历这个图结构进行打包一个个模块 ((根据文件的不同使用不同的loader来解析))
Loader
创建一个common.js 通过js创建一个元素 并且当我们希望给他设置一些样式的时候引入css文件 这个时候执行打包 会有如下报错
这个错误信息提醒我们需要一个loader来加载这个css文件 那么什么是loader呢
- loader可以对 模块的源代码 进行转换
- 我们可以将css文件也看成是一个模块 通过import来加载这个模块
- 在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能
css-loader的使用
对于加载css文件来说 我们需要一个可以读取css文件的loader 是这个loader最常用的就是css-loader
安装css-loader npm install css-loader -D
- 内联方式;
- 使用较少 不方便管理
- 在引入的样式前加上使用的loader,并且使用!分割;
import "css-loader ! ../css/style.css
- CLI方式(webpack5中不再使用);
- 在webpack5的文档中已经没有了–module-bind;
- 在webpack5的文档中已经没有了–module-bind;
- 配置方式
配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息:
module中有一个rules 属性 这个属性的配置如下
rules属性对应的值是一个数组: [rule]
数组中存放的是一个个rule rule是一个对象 对象中可以设置多个属性
test属性 :用于匹配resource 通常是正则表达式
use属性 : 对应的是一个数组
UseEntry是一个对象,可以通过对象的属性来设置一些其他属性
loader:必须有一个 loader属性,对应的值是一个字符串;
options:可选的属性,值是一个字符串或者对象,值会被传入到loader中;
query:目前已经使用options来替代;
传递字符串(如:use: [ ‘style-loader’ ])是 loader 属性的简写方式(如:use: [ { loader: ‘style-loader’} ]);
loader属性: Rule.use: [ { loader } ] 的简写。
loader配置代码
1 | module: { |
style-loader的使用
使用css-loader后可以加载css文件了 但是我们会发现css 并没有生效
- 因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中;
- 如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是style-loader
- 安装style-loader
npm install style-loader -D
注意: webpack中处理loader是从后往前处理的 所以要将style-loader写在 css-loader前面
1 | use:[ |
- 当前的style-loader是通过 document.createElement(style) 的方式生成了页内样式让css生效
less 的处理
当我们使用预处理器编写css样式的时候 怎么让我们的环境支持这些预处理器呢?
首先我们要把 less sass等通过工具转换成css
我们需要使用less工具完成它的编译转换
npm install less -D
npx less ./src/css/title.less > title.css
当在项目中编写大量的css 我们需要自动转换
这个时候我们可以使用less-loader 来自动使用less工具转换less到css
npm install less-loader -D
- 并对webpack.config.js进行配置
浏览器兼容性
我们该如何解决浏览器兼容性?这里指的是针对不同浏览器支持的特性
在很多脚手架中会看到如下配置
1 | > 1% |
这里的百分之一,就是指市场占有率
浏览器市场占有率
通过如下网站可以查看浏览器市场占有率
https://caniuse.com/usage-table
重要的 browserslist工具
如何可以在css兼容性和js兼容性下共享配置的兼容性条件?
- 当我们设置了一个条件 >1%
- 该条件代表的意思是css和js 要兼容市场占有率大于1%的浏览器
如何共享配置?
通过Browserslist
Browserslist是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置:
Browserslist编写规则一:
defaults:Browserslist的默认浏览器(> 0.5%, last 2 versions, Firefox ESR, not dead)。
5%:通过全局使用情况统计信息选择的浏览器版本。 >=,<和<=
dead:24个月内没有官方支持或更新的浏览器。现在是IE 10,IE_Mob 11,BlackBerry 10,BlackBerry 7, Samsung 4和OperaMobile 12.1。
last 2 versions:每个浏览器的最后2个版本。
Browserslist编写规则二 :
node 10和node 10.4:选择最新的Node.js10.x.x 或10.4.x版本。
- current node:Browserslist现在使用的Node.js版本。
- maintained node versions:所有Node.js版本,仍由 Node.js Foundation维护。
iOS 7:直接使用iOS浏览器版本7。
- Firefox ESR:最新的[Firefox ESR]版本。
- 。。。
supports es6-module:支持特定功能的浏览器。
browserslist config:在Browserslist配置中定义的浏览器。在差异服务中很有用,可用于修改用户的配置
since 2015或last 2 years:自2015年以来发布的所有版本
unreleased versions或unreleased Chrome versions:Alpha和Beta版本。
not ie <= 8:排除先前查询选择的浏览器。
Browserslist浏览器查询过程
我们可以将配置通过两种方式编写
- 一种是通过在package.json中添加
1 | "browserslist": [ |
- 或者新建文件
.browserslistrc
1 | >1% |
PostCSS工具
PostCSS是一个通过JavaScript来转换样式的工具;
这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置;
但是实现这些工具,我们需要借助于PostCSS对应的插件;
使用PostCSS
第一步:查找PostCSS在构建工具中的扩展,比如webpack中的postcss-loader;
第二步:选择可以添加你需要的PostCSS相关的插件;
在命令行使用PostCSS
- 我们需要单独安装一个工具 postcss-cli
npm install postcss postcss-cli -D
- 编写一个需要添加前缀的css
- 因为要添加前缀 所以安装autoprefixer
npm install autoprefixer -D
- 直接使用postcss工具 并指定使用autoprefixer
- npx postcss –use autoprefixer -o end.css ./src/css/style.css
PostCSS在webpack中使用
- 在webpack中postcss就是使用
postcss-loader
来处理的npm install postcss-loader -D
- 然后修改加载css的loader
- 注意:因为postcss需要有对应的插件才会起效果,所以我们需要配置它的plugin
1 | { |
单独的postcss配置文件
可以将这些配置信息放到一个单独的文件中进行管理
创建文件 postcss.config.js
1 | module.exports = { |
postcss-preset-env
在配置postcss-loader时,我们配置插件并不需要使用autoprefixer。
我们可以使用另外一个插件:postcss-preset-env
postcss-preset-env也是一个postcss的插件
它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环
境添加所需的polyfill;
也包括会自动帮助我们添加autoprefixer
npm install postcss-preset-env -D
注意:我们在使用某些postcss插件时,也可以直接传入字符串
1 | module.exports = { |
比如在设置十六进制颜色时设置了八位 但是某些浏览器并不认识这种语法 所以我们把颜色转成rgba形式 但是autoprefixer 并不会帮我们转换 使用postcss-preset-env可以完成这样的功能
1 | .content{ |
css-loader的importLoaders属性
- 当我们在index.css中使用@import引入另一个css文件test.css(index.css是被关联的css) 那么postcss-loader并不会对test.css进行处理
- 这个时候使用css-loader的options中importLoaders属性 importLoaders属性的值取决后面有几个loader 设置了对应值以后就可以让 后面的loader在处理一次
加载和处理其他资源
file-loader
要处理jpg、png等格式的图片,我们也需要有对应的loader:file-loader
file-loader的作用就是帮助我们处理import/require()**方式引入的一个文件资源,并且会将它放到我们输出的**
文件夹中;
npm install file-loader -D
文件的名称规则
- 有时候我们处理后的文件名称按照一定的规则进行显示:
- 比如保留原来的文件名、扩展名,同时为了防止重复,包含一个hash值等;
- 这个时候我们可以使用PlaceHolders来完成,webpack给我们提供了大量的PlaceHolders来显示不同的内容:
- 常用的placeholder
- [ext]: 处理文件的扩展名;
- [name]:处理文件的名称;
- [hash]:文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制)
- [path]:文件相对于webpack配置文件的路径
- 设置文件存放路径有两种方式
- 一种是设置name时 直接img/[name]
- 另一种是设置outputPath设置输出的文件夹
url-loader
url-loader和file-loader的工作方式是相似的,但是可以将较小的文件,转成base64的URI。
显示结果是一样的,并且图片可以正常显示;
开发的时候中我们往往是小的图片需要转换,但是大的图片直接使用图片即可
- 因为小的图片转换base64之后可以和页面一起被请求,减少不必要的请求过程;
- 而大的图片也进行转换,反而会影响页面的请求速度;
url-loader需要更多http请求
我们可以通过url-loader中 options属性limit 来设置转换的限制 100*1024 为100kb
asset module type
在webpack5版本中我们可以直接使用资源模块类型(asset module type)来替代之前我们加载资源时使用的loader,比如raw-loader 、url-loader、file-loader;
**资源模块类型(asset module type)**,通过添加 4 种新的模块类型,来替换所有这些 loader:
- asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现;
- asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现;
- asset/source 导出资源的源代码。之前通过使用 raw-loader 实现;
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader,并且配置资源体积限制实现;
asset module type的使用
1 | test: /\.(png|jpe?g|gif|svg)$/, |
当我们需要自定义文件的输出路径和文件名时 有两种方式
- 方式一:修改output,添加assetModuleFilename属性;
- 方式二:在Rule中,添加一个generator属性,并且设置filename;
如果我们想要实现url-loader的limit效果
- 步骤一:将type修改为asset;
- 步骤二:添加一个parser属性,并且制定dataUrl的条件,添加maxSize属性;
加载字体文件
如果我们需要使用某些特殊的字体或者字体图标,那么我们会引入很多字体相关的文件,这些文件的处理也是一样的。
我们可以使用 file-loader 来进行处理 也可以直接使用 asset module type 来进行处理
1 | { |