学习笔记

webpack 默认 config 文件名webpack.config.js, 可以通过webpack --config webpack.config.js指定配置文件, 默认导出到./dist/main.js, 一个最基础的配置文件如下:

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: "./build",
  },
};

webpack 默认只支持 import js 文件, 对于 css, img 这类模块需要额外的 loader 进行解析
1. loader 可以通过三种方式使用
  1. 内联方式: import “css-loader!./style.css”
  2. cli 方式: 已废弃
  3. 配置方式: modules.rules中允许配置多个 loader, rules 是一个[Rule]数组, Rule 是一个对象, 包含常用属性:
    1. test: 正则表达式, 对 resource 进行匹配
    2. loader: 只有一个 loader 时可以使用这个属性, 值为字符串
    3. use: [UseEntry]数组, useEntry 也是个对象包含常用属性:
      1. loader: 必须有 loader 属性, 值为字符串
      2. options: 可选属性, 字符串或对象, 值会传到 loader 中
  4. 直接使用loader: 'xx-loader'或者use: ['xx-loader']都是use: [{loader: 'xx-loader'}的简写
2. 普通的 css 文件使用css_loader解析, 安装: yarn add -D css-loader. css-loader只是让 webpack 能够正确解析 css 模块, 还需要使用style-loader生成<style>插入到<head>中, 安装: yarn add -D style-loader, 对相同 resource 的 loader, webpack 处理顺序是从右往左的, 所以对于普通的 css 文件, 配置应该是['style-loader', 'css-loader'], 先解析 css 文件, 再插入 html 中.
  1. 对于 sass/less/stylus 这类预处理工具也是同样的, 以 sass 为例, 安装: yarn add -D sass sass-loader@10(最新版的 sass-loader 不适配 sass, 安装 version10) 配置: use: ['style-loader', 'css-loader', 'sass-loader']
  2. 小知识: 可以使用npx sass foo.scss > bar.css 将 scss 转换为 css

针对不同浏览器兼容性, webpack 通过 browserslist 管理需要兼容的浏览器, 配置文件名.browserslistrc, babel, autoprefixer 等插件处理兼容性时都会先查询该浏览器配置,不会对不符合的浏览器做兼容 browserslist 编写规则如下:

default //默认的浏览器, 该行可以省略
> 1% //占有率>1%, 可以在https://caniuse.com/usage-table查询个浏览器占有率
last 2 version // 每个浏览器的最近两个版本
not dead // 两年内官方有支持或更新的浏览器

babel, autoprefixer 会通过caniuse-lite这个包去解析.browserslistrc里的内容, 也可以通过npx browserslist "> 1%, last 2 version, not dead"查看输出匹配的浏览器列表
指定兼容浏览器可以使用上述创建.browserslistrc, 也可以在package.json中新增browserslist字段.
1
2
3
{ "browserslist": ["> 1%", "last 2 version", "not dead"] }
如果什么配置都没有, 会使用默认的 browser 配置

or/,取并集, and取交集, not取反, 一般默认都是取并集

配置示例

放上最终的webpack.config.js和.browserslistrc配置
webpack.config.js:

const path = require("path");
module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.s?css$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

.browserslistrc:

1
2
3

> 1%
last 2 version
not dead

示例代码

https://github.com/Mariana-Yui/fe-learn-code/tree/main/learn-webpack/day2

webpack

#webpack

webpack学习笔记(2)

https://mariana-yui.github.io/2022/09/02/2022-09-02-study-webpack-day2/

作者

Mariana

发布于

2022年9月2日

许可协议

webpack学习笔记(3) 上一篇

webpack学习笔记(1) 下一篇