webpack5学习 --- 基本配置和样式打包webpack本身只能处理js模块，如果需要处理其它类型资源的模块，就需

webpack.config.js

在使用的过程中，我们可能一些配置和webpack的默认配置是冲突的或者想要对webpack的配置项进行扩充

此时一方面我们可以通过参数的形式去进行配置，详细参数可以参考官网

# 所有的cli参数参考 https://webpack.js.org/api/cli/
$ npx webpack --entry ./main.js --output-path build

但是这种配置方式有一些麻烦

配置项如果过多，那么就会导致代码过长，不利于阅读和维护
手动执行命令的时候如果没有配置到package.json中，而是直接手动执行对应命令的时候

如果执行命令的路径不对，会导致编译错误

所以在多数情况下，我们对应的配置会配置到webpack对应的配置文件中，编译的时候直接加载配置文件即可

默认的webpack的配置文件位于项目根目录下，默认的配置文件名为webpack.config.js

webpack.config.js

const path = require('path')

// 默认是运行在node环境下，需要使用CJS的方式导出配置对象
// 如果在配置文件中，配置了对应选项，就使用配置的值，如果没有配置，就使用默认配置
module.exports = {
  // 入口 --- 相对路径
  entry: './src/main.js',

  // 出口 --- 是一个对象
  output: {
    // 输出文件夹的配置，必须是一个绝对路径
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
}

手动指定配置文件

有时候，我们并不想使用默认的配置文件，或者需要根据具体运行环境使用不同的配置文件，此时就可手动指定配置文件

"scripts": {
    "build": "webpack --config w.config.js" // 使用--config或-c来指定 自定义的配置文件
  }

如果有指定配置文件或有默认配置文件的时候，webpack会使用配置文件去进行打包，

如果找不到对应的配置文件的时候，就会直接去使用默认配置

依赖关系图

webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件

从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等)

然后遍历图结构，打包一个个模块。

这就意味着如果一个模块没有被引入使用的时候，这个模块并不会加重到webpack的依赖关系图中，也就不会参与到打包过程中

同样的，即使一个模块被引入了，如果他们中存在着没有被使用的方法，webpack在打包的时候，会使用tree shaking技术，将没有使用的方法在打包的过程中进行移除，从而保证打包出来的包的体积最小

loader

默认情况下，webpack只能引入js模块，对于其它类型模块，webpack在引入后是不知道如何编译打包的，

此时就需要一个翻译官来告诉webpack，这些模块如何进行编译操作，这些翻译官就是loader

使用方式

内联模式
配置模式(常用)

内联模式

// 在引入的模块之前写上需要使用的loader
// loader之间以及loader和引入的资源之间使用!进行分割

// 执行顺序是 从右往左 先引入资源，在移除使用对应的loader进行解析
import 'style-loader!css-loader!./css/index.css'

配置方式

module.exports = {
  module: { // 在顶层配置选项有一个module, 表示解析模块时候的配置
    rules: [ // 模块解析规则 类型是 Rule[]
      { // Rule对象
        test: /\.css$/, // 正则，匹配那些文件适合这个规则
        use: [ // 需要使用模块列表 UseEntry[]
          // loader的加载顺序是从下往上，从右往左, 从后往前
          { 
            loader: 'css-loader', // 使用的模块
            options: {} // 传递给模块的配置参数 没有参数可以不传
          }
        ]
      }
    ]
  }
}

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: 'css-loader'
        }
      ]
    }
  ]
}

// ====> loader没有配置参数需要传递的时候，可以简写为字符串格式

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ]
      }
    ]
  }
}

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ]
      }
    ]
  }
}

// ====> 如果use中的loader只有一个的时候，可以继续进行简写

// 简写方式1
module: {
  rules: [
    {
      test: /\.css$/,
      use: 'css-loader'
    }
  ]
}

// 简写方式2
module: {
  rules: [
    {
      test: /\.css$/,
      loader: 'css-loader'
    }
  ]
}

css打包

css-loader

# css-loader 可以让webpack可以正常识别和编译css模块
$ npm install css-loader -D

配置 --- 加载loader

module: {
  rules: [
    {
      test: /\.css$/,
      use: 'css-loader'
    }
  ]
}

此时webpack可以正常解析css模块，但是并没有将对应的样式应用到对应的元素上

所以此时需要另一个loader来辅助其进行操作style-loader

style-loader的功能是将css-loader解析后的代码，以内联样式(页内样式)的方式插入到head中

$ npm i style-loader -D

配置

module: {
  rules: [
    {
      test: /\.css$/,
      use: [ // 注意加载顺序是 从下往上，从右往左, 从后往前
        'style-loader',
        'css-loader'
      ]
    }
  ]
}

css预处理器的打包

此处以less为例，其余同理

# less-loader 是依赖于less提供的lessc来进行编译的,
# 也就是less-loader底层会调用lessc来帮助我们进行相应的编译

# 项目中可以只安装less-loader，不单独安装less
# 因为less会作为less-loader的依赖一起被下载使用
$ npm i less less-loader -D

// 配置 部分
{
  test: /\.less$/,

    use: [
      'style-loader',
      'css-loader',
      'less-loader'
    ]
}

浏览器兼容性

在开发中，我们需要去处理兼容性问题，针对不同的浏览器支持的特性: 比如css特性、js语法，进行不同的适配

那么我们就需要一个工具，单独来查询浏览器适配问题，并将适配信息在多个工具之间进行共享这些信息

这个工具就是browserslist, 他会去使用其依赖的包caniuse-lite去caniuse网站上查询浏览器的兼容性情况，随后在所有需要进行浏览器兼容性适配的工具之间共享浏览器兼容性数据

# 如果一个工具需要使用borwserslist，那么他会自动将browserslist作为其依赖项，并自动安装browserslist
# 所以多数情况下，我们不需要主动去安装borwserslist
$ npm i browserslist -D

命令行中使用

# 没有查询条件，查看有没有配置文件，有就使用配置文件，没有就使用内置的默认配置
$ npx browserslist

# 查询的时候，使用查询条件来进行查询
# 多个条件之间使用逗号进行隔开
$ npx browserslist ">1%, last 2 version, not dead"

自定义配置

配置方式1 --- package.json

使用逗号进行分割表示的是并集，即是或的关系

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

"browserslist": {
  "development": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],

  "production": [
    "> 0.5%",
    "not dead"
  ]
}

配置方式2 --- 在项目根目录下新建.browserslistrc

使用换行，表示的是并集，即是或的关系

> 2%
last 2 versions
not dead

browserslist 配置规则

以下是常用的配置规则，可以点击链接查看更多配置规则

规则	说明
defaults	Browserslist的默认浏览器(> 0.5%, last 2 versions, Firefox ESR, not dead) Firefox ESR --- 火狐延长支持版
5%	市场份额5%，可以和>=，<和<=等一起使用
dead	24个月内没有官方支持或更新的浏览器
last 2 versions	每个浏览器的最后2个版本
not ie <= 8	排除先前查询选择的浏览器

关系符	说明
or 或逗号或换行	并集，表示或的关系
and	交集，表示并的关系
not	取反，表示非集的关系

stats

默认情况下，webpack在编译的过程中，会输出很多的信息，但是有些时候，我们只想关注其中的某一部分信息的时候，可以设置stats选项的值，让webpack在编译的时候只输出我们所需要的信息

module.exports = {
  //...
  stats: 'errors-warnings',
};

加载vue文件

在React中，编写组件使用的是JSX，所以React中的组件后缀名一般是js或者是jsx，

所以我们可以使用babel-loader来加载react组件

但是在Vue文件中，编写组件使用的更多的是模板语法 (虽然也可以使用jsx来编写vue组件)，

vue中组件一般使用的是单文件组件，后缀名是.vue

因此我们需要在vue组件在进行构建时，使用特定的loader进行处理

 # 安装
 # vue-laoder 用以对vue文件进行解析
 # vue-template-compiler 会在vue-loader解析vue文件之前，对vue组件中的模板进行解析
 # 早期的vue-loader使用时需手动安装vue-template-compiler
 # 最新的vue-loader已不在需要
  npm install vue-loader -D

webpack.config.js --- 配置

// 这个插件是集成在vue-loader这个包中的
const { VueLoaderPlugin } = require('vue-loader')

module: {
  rules: [
    {
      // vue组件中的样式部分会自动抽离为单独部分，被处理样式的loader所解析
      // 所以必须需要存在对应的解析样式的loader及对应的配置
      test: /.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    },

   // 解析vue的单文件组件
   {
     test: /.vue$/,
     use: [
       'vue-loader'
     ]
   }
 ],
},

plugins: [
  // 加载vue的SFC文件的时候，除了使用vue-loader以外
  // 还需要结合VueLoaderPlugin一起使用才可以正常解析vue的SFC文件
  new VueLoaderPlugin(),
]