【webpack】wabpack5 知识梳理

1、简单介绍

默认功能

可处理 js、json文件,处理 js 文件引入将其打包;

可处理字体、图片、音视频等静态资源(webpack5有内置loader:asset);

将es6的import规范编译为浏览器可识别的commonjs规范

生产环境比开发环境打包多了代码丑化、压缩;

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

1、webpack 如何处理样式文件?(预处理语言解析、抽离样式文件、样式兼容性、样式文件压缩)

bash 复制代码
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
  • 添加对应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 如何配置代码检查,统一代码规范?

bash 复制代码
npm install eslint-webpack-plugin --save-dev
# eslint >= 7
npm install eslint --save-dev
  • 添加插件: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的兼容、压缩等处理;
bash 复制代码
npm install -D babel-loader @babel/core @babel/preset-env
  • 同理,可以在使用相关loader时添加配置,不过通常在项目中添加配置文件,以便维护;如:babel.config.js

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

bash 复制代码
npm install --save-dev html-webpack-plugin

五大核心

入口(entry):指定打包入口;

出口(output):指定打包输出文件目录、文件名;

转换器(loader):用于对模块的源代码进行转换,如处理样式、图片等静态资源;

插件(plugins):用于执行范围更广的任务,如打包优化,资源管理,注入环境变量;

模式(mode):默认值为 production,启用 webpack 内置在相应环境下的优化;

2、安装

  • "webpack": "^5.89.0"
  • "webpack-cli": "^5.1.4"
bash 复制代码
npm i webpack webpack-cli -D

3、配置介绍

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

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

  • npm script脚本
json 复制代码
"scripts": {
  "dev": "webpack ./src/main.js --mode=development",
  "build": "webpack ./src/main.js --mode=production",
},
  • 直接命令行
bash 复制代码
npx webpack ./src/main.js --mode=development
npx webpack ./src/main.js --mode=production
# 创建配置文件
npx webpack init

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

  • 项目根目录创建配置文件
js 复制代码
// webpack5 基本配置
module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: 'development',
}
  • 直接执行webpack,自动使用该文件配置
bash 复制代码
npx webpack

后续更新常用webpack配置!

相关推荐
热爱编程的小曾18 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin29 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox42 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox