Webpack打包原理及浏览器兼容配置

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语法，之间的兼容性；

可以查询到浏览器的市场占有率

"Can I use" usage table

如何可以在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文件；