1. Webpack配置文件
1.1基本配置
module.exports = {
// 入口 可以使用相对路径
entry: "./src/main.js",
// 出口 必须绝对路径
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build")
}
}
如果配置文件并不是webpack.config.js的名字 ,可以通过 --config 来指定对应的配置文件;
webpack --config xxx.config.js
1.2webpack打包原理
webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件;
从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、
字体等);
然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析);
2. loader使用
2.1 loader的配置
loader 可以用于对模块的源代码进行转换;
将css文件也看成是一个模块,我们是通过import来加载这个模块的;
在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能;
对于加载css文件来说,我们需要一个可以读取css文件的loader;
这个loader最常用的是css-loader;
css-loader的安装:
npm install css-loader -D
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息:
-
module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载);
-
这种方式可以更好的表示loader的配置,也方便后期的维护,同时也让你对各个Loader有一个全局的概览;
module.rules的配置如下:
-
rules属性对应的值是一个数组:[Rule]
-
数组中存放的是一个个的Rule,Rule是一个对象,对象中可以设置多个属性:
-
test属性:用于对 resource(资源)进行匹配的,通常会设置成正则表达式;
-
use属性:对应的值时一个数组:[UseEntry]
-
UseEntry是一个对象,可以通过对象的属性来设置一些其他属性 ;
-
loader:必须有一个 loader属性,对应的值是一个字符串;
-
options:可选的属性,值是一个字符串或者对象,值会被传入到loader中;
-
-
传递字符串(如:use: [ 'style-loader' ])是 loader 属性的简写方式(如:use: [ { loader: 'style-loader'} ]);
-
-
loader属性: Rule.use: [ { loader } ] 的简写;
-
module.exports = {
// 入口 可以使用相对路径
entry: "./src/main.js",
// 出口 必须绝对路径
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build")
},
module: {
rules: [
{
// 匹配资源 规则使用正则表达式
test: /\.css$/,
// loader: "css-loader"
use: [
// { loader: "css-loader" }
// webpack 解析顺序是 从下网上 从右往左
"style-loader",
"css-loader"
]
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
}
2.2 认识style-loader
-
因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中;
-
如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是style-loader;
如上面2.1代码配置
2.3 处理less文件
需要确定,less、sass等编写的css需要通过工具转换成普通的css;
使用less工具来完成它的编译转换:
npm install less -D
使用less-loader,来自动使用less工具转换less到css;
3. 浏览器兼容性
3.1 认识browserslist工具
开发中,浏览器的兼容性问题,我们应该如何去解决和处理?
兼容性是针对不同的浏览器支持的特性:比如css特性、js语法,之间的兼容性;
可以查询到浏览器的市场占有率
如何可以在css兼容性和js兼容性下共享我们配置的兼容性条件
-
就是当我们设置了一个条件: > 1%;
-
表达的意思是css要兼容市场占有率大于1%的浏览器,js也要兼容市场占有率大于1%的浏览器;
-
是通过工具来达到这种兼容性的,比如postcss-prest-env、babel、autoprefixer等;
如何可以让他们共享我们的配置呢?
是Browserslist;
Browserslist是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置:
类似于这样的配置:
>1% last 2 versions not dead
工具会根据我们的配置来获取相关的浏览器信息,以方便决定是否需要进行兼容性的支持:
条件查询使用的是caniuse-lite的工具,这个工具的数据来自于caniuse的网站上;
3.2 配置browserslist
-
方案一:在package.json中配置;
-
方案二:单独的一个配置文件.browserslistrc文件;