-
Webpack核心概念
- Entry(入口): 入口文件配置。指示
webpack
应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。默认是将src/index.js
作为入口文件 - Output(出口): 出口配置,指定打包完成后的文件叫什么名字放在哪个文件夹内,默认在根目录下生成一个
dist
文件夹,默认的打包文件名称是main.js
- Loader(模块转换器):
loader
可以用于对模块的源代码进行转换,将所有类型的文件转换为webpack
能够处理的有效模块,然后你就可以利用webpack
的打包能力,对它们进行处理。例如css
文件,可以将css
文件也看成是一个模块,我们是通过import
来加载这个模块的;在加载这个模块时,webpack
其实并不知道如何对其进行加载,我们必须制定对应的loader
来完成这个功能 - Plugins(插件):
Plugin
可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等 - Module(模块): 开发者将程序分解成离散功能块,并称之为模块
- Entry(入口): 入口文件配置。指示
-
Webpack默认入口文件以及输出文件夹、文件名
上文提到配置入口及出口用的是entry
以及output
两个参数,配置的方法也有两种- 在打包命令中添加参数(命令会比较长不易于读)
命令如下:
webpack --entry ./src/main.js --output-path ./build --output-filename build.js
首先可以将index.js
文件改成main.js
没有配置入口文件 配置完成之后打包成功 - 在配置文件中添加(推荐方式)
webpack
默认会读取webpack.config.js
文件中的配置,如果需要自定义文件命令中添加参数配置即可配置规则如下
- 在打包命令中添加参数(命令会比较长不易于读)
-
loader概念以及配置方式
借用官方文档的说明:loader 用于对模块的源代码进行转换。loader 可以使你在
import
或 "load(加载)" 模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中import
CSS 文件! 配置方式:
配置module.rules
是个数组并且允许我们配置多个loader
具体配置如下:rules
是个数据然后数组中是每个 rule对象,对象中有多个属性rule
对象中的test
属性,用于对resource
(资源)进行匹配的,通常会设置成正则表达式;rule
对象中的use
属性 对应的值是个数组loader
必须有一个loader
属性,对应的值是一个字符串;options
可选的属性,值是一个字符串或者对象,值会被传入到loader
中; 备注: 如果没有options
课直接写成['css-loader']
loader
属性,其实就是 use的缩写,如果只用到一个loader
并且没有option
的时候可以使用缩写形式
-
css-loader
首先如要安装css-loader
对应命令如下:
yarn add css-loader -D
应为仅仅是开发时需要所以只需要安装到开发环境依赖 如果没有使用css-loader
然后此时引入css
文件会报出如下错误: 因为此时webpack
并不知道如何对其进行加载,所以提示需要制定对应的loader
此时需要配置css-loader
所以他的作用就是帮助webpack
读取css
文件的loader
,安装后配置方法有两种- 内联方式:在每个
import
语句中显式指定loader
。
import "css-loader!../css/index.css";
- 配置方式:在配置文件中配置
loader
配置完成之后webpack
就能加载css
文件了,打包也就成功了
- 内联方式:在每个
-
style-loader
上文中说了css-loader
的用法,最终成功打包,但是运行时发现样式并没有生效如下图: 原因是css-loader
仅仅是对css
文件进行解析,并不会将解析后的css
插入到页面中,所以如果要让css
文件生效,就需要插入这个动作,此时就可以使用style-loader
进行插入动作,首先第一步同上需要安装style-loader
,同样的仅仅只是开发使用,所以只需要安装开发依赖,命令如下:
yarn add style-loader -D
配置方式和css-loader
相同如下图: 注意:因为loader
的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将style-loader
写到css-loader
的前面;否则会报错(应为要先将css
加载出来之后再插入,如果没加载出来直接插入肯定是不知道插入什么所以打包会报错),
结果如下图: -
less-loader
在我们平常开发中经常会用到动态css
,所以就会有less
、sass
等文件,但是这些预处理文件webpack
是不知道怎么加载的,同样的一些动态代码的写法浏览器也不支持的,所以就需要将less
文件先转成css
文件然后按照css
文件的打包流程打包即可 这里可以使用less
转换工具进行转换安装指令如下:yarn add less -D
转换命令如下:
npx less ./src/style/style.less > ./src/style/style1.css
发现此时就转换成功,但是当css
多了以后每个文件都这样执行以下很影响效率,此时就可以使用less-loader
,让他来帮我们转换
首先安装less-loader
命令如下:
yarn add less-loader -D
然后在配置文件中配置
-
postcs-loader
-
browserslist
browserslist
是在不同前端工具直接共用目标浏览器和node
版本的配置工具,使用到browserslist
的前端工具有:- Autoprefixer
- Babel
- postcss-preset-env
- eslint-plugin-compat
- stylelint-no-unsupported-browser-features
- postcss-normalize
- obsolete-webpack-plugin
使用该工具的时候一般会写一个类似与下面这种的配置文件:
条件查询使用的是
caniuse-lite
的工具,这个工具的数据来自于caniuse
的网站上;这些工具会根据我们的配置来获取相关的浏览器信息,以方便决定是否需要进行兼容性的支持,具体browserslist
编写规则等可以参考 github.com/browserslis…该网站,里面有详细的描述。 配置方式:
-
在package.json中配置
-
单独的一个配置文件.browserslistrc文件;
如果没有配置
browserslist
会有个默认的配置:
-
PostCSS工具
PostCSS
主要是一个使用js
来转换样式的工具,这个工具可以帮助我们进行一些CSS
的转换和适配,比如自动添加浏览器前缀,css
样式重置;但是实现这些功能都需要相应的一些插件。- 使用方法:
首先需要安装postcss
工具以及命令工具postcss-cli
- 安装命令
yarn add postcss postcss-cli -D
autoprefixer
后来代码实操 - 使用方法:
-
插件autoprefixer
就是postcss
给代码添加前缀的一个插件- 安装命令
yarn add autoprefixer -D
- 使用方式
npx postcss --use autoprefixer -o ./src/style/style-new.css ./src/style/style.css
- 安装命令
-
postcss-loader
postcss-loader
的作用类似于less-loader
,正式开发中有很多css
文件我们不可能每个文件都想上文中那样每个都用指令转换,所以此时webpack
中使用postcss
就可以借助postcss-loader
来处理- 安装
postcss-loader
yarn add postcss-loader -D
- 配置
postcss-loader
package.json
中配置postcss.config.js
或者postcss.config.cjs
导出一个对象的 CommonJS 模块(推荐)
- 安装
-
postcss-preset-env
一般的开发中如果使用了postcss-loader
一般都不会使用autoprefixer
插件而是直接使用postcss-preset-env
应为其内置就有自动帮助我们添加前缀同时它可以帮助我们将一些现代的CSS
特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill-
安装
postcss-preset-env
yarn add postcss-preset-env -D
-
配置 同
autoprefixer
的配置方式 -
举例 添加一个
HEXA
的颜色值,如果仅仅是使用autoprefixer
插件效果如图: 使用postcss-preset-env
插件: 会转成浏览器都兼容的rgba
格式
-
-