【webpack】wabpack5 知识梳理

1、简单介绍

默认功能

可处理 js、json文件，处理 js 文件引入将其打包；
可处理字体、图片、音视频等静态资源（webpack5有内置loader：asset）；
将es6的import规范编译为浏览器可识别的commonjs规范；
生产环境比开发环境打包多了代码丑化、压缩；

其他功能：可通过配置实现

1、webpack 如何处理样式文件？（预处理语言解析、抽离样式文件、样式兼容性、样式文件压缩）

npm install --save-dev less-loader less
npm install --save-dev mini-css-extract-plugin
npm install --save-dev postcss-loader postcss postcss-preset-env
npm install css-minimizer-webpack-plugin --save-dev
1
2
3
4

• 添加对应loader，处理css、less、sass等样式资源到js出口文件，动态创建style标签；
• 可通过mini-css-extract-plugin将样式文件抽离，通过link标签引入，代替style-loader；
• 可通过postcss-loader，做css兼容性处理，同样使用智能预设postcss-preset-env，默认能兼容大部分浏览器，也可通过package.json中的browserslist添加兼容哪些浏览器；
• 可通过css-minimizer-webpack-plugin，对样式进行压缩；

2、webpack 如何配置代码检查，统一代码规范？

npm install eslint-webpack-plugin --save-dev
# eslint >= 7
npm install eslint --save-dev
1
2
3

• 添加插件：eslint-webpack-plugin+.eslintignore+.eslintrc.js；
  • .eslintignore：如果安装了eslint对应的vscode插件，因为它不能读取webpack插件中设置的忽略文件，所以单独在项目中加该文件（此文件对vscode插件和webpack插件都有效）
  • .eslintrc.js：用于设置具体检查标准（对vscode插件和webpack插件都有效）
  • vscode插件检查代码规范：在编写代码时就能提示；
  • webpack插件检查代码规范：是在启动服务或者打包时生效，不符合就运行、打包失败；

3、webpack 如何处理 js 语法兼容性？

• 使用loader，添加babel相关加载器来解析js，从而实现js的兼容、压缩等处理；

npm install -D babel-loader @babel/core @babel/preset-env
1

• 同理，可以在使用相关loader时添加配置，不过通常在项目中添加配置文件，以便维护；如：babel.config.js

4、webpack 实现自动在html文件引入打包后的js、css等文件：使用插件``

npm install --save-dev html-webpack-plugin
1

五大核心

入口(entry)：指定打包入口；
出口(output)：指定打包输出文件目录、文件名；
转换器(loader)：用于对模块的源代码进行转换，如处理样式、图片等静态资源；
插件(plugins)：用于执行范围更广的任务，如打包优化，资源管理，注入环境变量；
模式(mode)：默认值为 production，启用 webpack 内置在相应环境下的优化；

2、安装

• “webpack”: “^5.89.0”
• “webpack-cli”: “^5.1.4”

npm i webpack webpack-cli -D
1

3、配置介绍

可使用webpack默认配置，也可以通过创建webpack.config.js配置；

执行方式一：简单更改webpack配置

• npm script脚本

"scripts": {
  "dev": "webpack ./src/main.js --mode=development",
  "build": "webpack ./src/main.js --mode=production",
},
1
2
3
4

• 直接命令行

npx webpack ./src/main.js --mode=development
npx webpack ./src/main.js --mode=production
# 创建配置文件
npx webpack init
1
2
3
4

执行方式二：创建webpack.config.js添加自定义配置

• 项目根目录创建配置文件

// webpack5 基本配置
module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: 'development',
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 直接执行webpack，自动使用该文件配置

npx webpack
1

后续更新常用webpack配置！