【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配置!

相关推荐
kymjs张涛9 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵14 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62226 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94932 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧42 分钟前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
Sun_light2 小时前
5 个理由告诉你为什么有了 JS 还要用 TypeScript
前端·typescript
陈随易2 小时前
Kimi k2发布,效果比肩Sonnet4,价格与DeepSeek一致
前端·后端·程序员