Webpack基础(一)

2022年5月2日

Asuhe

webpack简介

官方说，webpack is a static module bundler for modern JavaScript applications.

翻译过来：webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

我们来对上面的解释进行拆解： p打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

基础安装

webpack和webpack-cli

webpack是执行打包的本体，它原生只支持打包Javascript和Json文件，若需要打包如html、css、image等资源则要安装相应的loader。

webpack-cli是调用webpack的一种手段。通常我们调用webpack都是直接在命令行里调用的，而这正是webpack-cli的功劳。如果没有安装webpack-cli那么我们将不能直接从命令行里读取参数。它起到的是一个传递命令行参数到webpack中的功能。实际上，当我们使用Vue或React的脚手架时，我们并没有安装webpack-cli这个东西。Vue有vue-cli而React有creat-react-app，它们替代了webpack-cli传递命令行参数到webpack的功能。

安装

# 全局安装 webpack5 和 webpack-cli4
npm install -g webpack@5 webpack-cli@4

# 局部安装
npm install -D webpack@5 webpack-cli@4

基础使用

当我们直接使用webpack命令时，调用的是我们全局安装的webpack。

如果我们需要使用当前项目中的webpack版本打包项目，有三种方式分别是：

第一种直接找到本地安装路径，调用

# 直接找到node_modules/.bin下的webpack文件打包
node_modules\.bin\webpack

第二种使用npx

# 使用npx，npx可以自动去node_modules文件夹下寻找文件
npx webpack

第三种在配置文件package.json中配置命令，该方法最常用

// 在配置文件package.json的"script"里的配置命令
"scripts": {
    "build": "webpack" // package.json会优先在本地node_modules中寻找，若找不到则会往上查找全局环境下的webpack
}

# 调用scripts里的命令
npm run build

配置package.json

当我们使用webpack打包文件时，它会默认从当前目录下找到src文件夹下的index.js。所有引入或关联到index.js里的资源都会被webpack打包，否则不会被打包。

默认打包的文件会生成在当前目录的dist文件夹下，名称为main.js。

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。

我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

// 需求：将入口文件改为 main.js ，输出文件改为 bundle.js
// 方法一 常用方法

// webpack.config.js
const path = require('path');
// 导出配置信息
module.exports = {
	entry: "./scr/main.js", // 入口文件更改为 main.js
    output: {
		filename: "bundle.js", // 输出文件的名称更改为bundle.js
         path: path.resolve(__dirname,"./dist")
    }
}

# 方法二
npx webpack --entry ./src/main.js --output-path ./build

默认情况下webpack从webpack.config.js里读取配置，当我需要更改webpack读取配置的文件时，可以通过--config来指定配置文件

# 指定 wk.config.js 为 webpack 的配置文件
webpack --config wk.config.js

或者通过package.json指定

// package.json
"scripts": {
    "build": "webpack --config wk.config.js"
}

配置Loader

开头我们说过，webpack原生只支持打包javascript文件和json文件。当我们需要打包其它资源时，就要配置相应的loader来支持，否则会报错。

css-loader

使用loader前我们需要安装好loader。安装css-loader：

npm install css-loader -D

使用loader通常有三种方式，分别是：

内联方式
cli方式
配置文件方式

内联方式

内联方式就是在引入的样式前加上使用的loader，并且使用!分割每个loader。这种方式只能作用在当前文件下，若其它文件下也引入了css文件则需要再次配置。所以不常使用。

// index.js中引入css文件并使用css-loader和style-loader
import "style-loader!css-loader../css/index.css" // 在路径前面加上loader名称

cli方式

在webpack5的文档中已经没有了--module-bind命令，所以webpack5不支持该模式。具体配置方式可查找webpack4官方文档

配置文件方式

该方式是最常见的loader使用方式。其意思是在我们的webpack.config.js文件中写明配置信息。在该文件暴露的对象中，使用module.rules来配置loader

// webpack.config.js
const path = require('path');
// 导出配置信息
module.exports = {
	entry: "./scr/main.js",
    output: {
		filename: "bundle.js",
         path: path.resolve(__dirname,"./dist")
    }
    module: {
    	rules: [ // rules属性对应的值是一个数组：[Rule] 。数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性:
    		{
    			test: /\.css$/, // 用于对 resource（资源）进行匹配的，通常会设置成正则表达式
    			// loader:"css-loader" // 写法一
    			// use: ["css-loader"] // 写法二
    			// 写法三
    			use: [ // 对应的值时一个数组：[UseEntry] 。UseEntry是一个对象，可以通过对象的属性来设置一些其他属性:

    				{loader:"css-loader",options:'xxx'} // 完整写法，options可以对css-loader传入参数
					// 若无需传参则可简写为写法二
					// 若处理该文件仅使用一个loader，可简写为写法一
    			]
                // loader:'css-loader' 写法四。 loader属性： Rule.use: [ { loader } ] 的简写。
			}
		]
	}
}

style-loader

当我们把css文件打包好后，css文件并不会生效。此时我们还需要使用style-loader将打包好的css插入页面。安装style-loader：

npm install style-loader -D

配置style-loader。这里需要注意的是，使用多个loader处理同一个资源时，loader的调用顺序是从后往前的。所以loader的顺序需要将style-loader放在最后。配置书写如下：

// webpack.config.js
module: {
	rules: [
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"}, // 然后再插入页面
                {loader: "css-loader"} // 先将css文件解析打包
            ]
        }
    ]
}

less-loader

打包less文件的步骤也和上面的文件同理，但是less-loader本身并不能处理less文件，所以安装时还需要另外安装less处理工具，less-loader仅仅只是调用了less处理工具而已。安装less处理工具和less-loader：

npm install less -D  # 安装less处理工具
npm install less-loader -D # 安装less-loader

配置less-loader：

// webpack.config.js
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        }
    ]
}

browserslist

开发中我们经常需要去处理浏览器兼容性问题，我们不可能针对每个浏览器一个一个去配置兼容性。通常的做法是根据浏览器的市场占有率去选择性兼容。在开发中有专门的工具如autoprofixer、PostCss、postcss-preset-env去帮助我们自动生成兼容代码，而这里我们首先要解决的是关于浏览器的市场占有率等信息如何自动获取。browserslist就是帮助我们获取浏览器占有率，指定要配置哪些浏览器的工具。它可以让我们在不同的前端工具之间，共享目标浏览器和Node.js版本的配置。

安装browserslist：

npm install browserslist -D

配置browserslist。配置它有两种方式，一是通过package.json，二是单独编写.browserslistrc文件配置当有该文件时会默认读取该文件中的配置。

package.json配置：

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

我们还可以通过编辑.browserslistrc文件去配置：

last 2 version
not dead
> 1%

Browserslist编写规则：

defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）
5%：通过全局使用情况统计信息选择的浏览器版本。 >=，<和<=工作过
- 5% in US：使用美国使用情况统计信息。它接受两个字母的国家/地区代
- 5% in alt-AS：使用亚洲地区使用情况统计信息。有关所有区域代码的列表，请参见caniuse-lite/data/regions
- 5% in my stats：使用自定义用法数据
- 5% in browserslist-config-mycompany stats：使用来自的自定义使用情况数据browserslist-config-mycompany/browserslist-stats.json
- cover 99.5%：提供覆盖率的最受欢迎的浏览器
- cover 99.5% in US：与上述相同，但国家/地区代码由两个字母组成
- cover 99.5% in my stats：使用自定义用法数据。
dead：24个月内没有官方支持或更新的浏览器
last 2 versions：每个浏览器的最后2个大版本
- last 2 Chrome versions：最近2个版本的Chrome浏览器
- last 2 major versions或last 2 iOS major versions：最近2个主要版本的所有次要/补丁版本
node 10和node 10.4：选择最新的Node.js10.x.x 或10.4.x版本
current node：Browserslist现在使用的Node.js版本
maintained node versions：所有Node.js版本，仍由 Node.js Foundation维护
iOS 7：直接使用iOS浏览器版本7
- Firefox > 20：Firefox的版本高于20 >=，<并且<=也可以使用。它也可以与Node.js一起使用
- ie 6-8：选择一个包含范围的版本
- Firefox ESR：最新的[Firefox ESR]版本
- PhantomJS 2.1和PhantomJS 1.9：选择类似于PhantomJS运行时的Safari版本
extends browserslist-config-mycompany：从browserslist-config-mycompanynpm包中查询
supports es6-module：支持特定功能的浏览器。 es6-module这是“我可以使用” 页面feat的URL上的参数。有关所有可用功能的列表，请参见。caniuse- lite/data/features
browserslist config：在Browserslist配置中定义的浏览器。在差异服务中很有用，可用于修改用户的配置，例如 browserslist config and supports es6-module
since 2015或last 2 years：自2015年以来发布的所有版本（since 2015-03以及since 2015-03-10)
unreleased versions或unreleased Chrome versions：Alpha和Beta版本
not ie <= 8：排除先前查询选择的浏览器

根据上述编写规则，我们编写了多个条件之后，多个条件之间是什么关系呢？

刚刚我们在.browserslistrc中书写的规则没有添加关键字，默认为or的关系