文章目录
webpack5基础1、webpack5简介2、webpack5大核心概念3、打包js文件创建文件下载依赖启用webpack打包结果使用
4、webpack配置文件webpack.config.js5、webpack处理样式资源5.1 处理css样式资源5.2 处理less样式资源5.3 处理图片资源
6、修改输出文件目录7、自动清空上次打包资源8、处理js资源8.1 eslint使用
8.2 babel使用
9、开发环境下自动打包好html资源10、开发环境下自动更新打包数据文件
webpack5基础
1、webpack5简介
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了
进一步来说就是： 当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。
常见打包工具：Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等
webpack本身功能有限： 开发者模式（development）下仅能编译js中的模块化语法； 在生产者模式（production）下能编译js中的模块化语法，还能压缩js代码。
使用前提：nodejs版本在16以上
2、webpack5大核心概念
1、entry（入口） 指示 Webpack 从哪个文件开始打包
2、output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等
3、loader（加载器） webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader才能解析
4、plugins（插件） 扩展 Webpack 的功能
5、mode（模式） 主要有两种模式：
开发模式：development生产模式：production
3、打包js文件
先创建好整体目录，模拟下项目目录
项目名
- src # 项目源码目录
- js # js文件目录
- count.js # js目录下的count.js文件
- sum.js # js目录下的sum.js文件
- main.js # 入口文件
创建文件
count.js（减法运算）
export default function count(x,y){
return x-y;
}
sum.js（累加求和）
export default function sum(...args){
return args.reduce((p,c) => p+c,0);
}
main.js（入口文件）
// 引入js文件
import count from "./js/count"
import sum from "./js/sum"
console.log(count(2,1));
console.log(sum(1,2,3,4));
下载依赖
初始化
npm init -y
生成一个package.json文件
下载依赖
npm i webpack webpack-cli -D
命令中第一个webpack是主要要用到的包，webpack-cli包中包含了webpack要使用的指令。
启用webpack
开发模式：只能编译js中的模块化语法
npx webpack ./src/main.js --mode=development
生产模式：可以编译js中的模块化语法并且可以压缩js代码。
npx webpack ./src/main.js --mode=production
npx webpack命令是用来运行本地安装的webpack包的。 ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。 --mode=xxx:指定模式（环境）
打包结果
打包完成后，可以发现目录中多了一个dist文件夹，打包好的文件就在这个文件夹中。 开发模式下打包好的文件大致如下：
生产模式下打包好的文件大致如下，可以发现js代码进行压缩了
使用
使用时，因为页面不能解析模块化语法，所以需要引入经过打包好并且重新编译好的main.js，而不是最开始的那个入口文件，也就是说要使用dist/main.js
4、webpack配置文件webpack.config.js
webpack.config.js
// nodejs核心模块，专门用来处理路径问题
const path = require("pach");
module.export = {
// 入口
entry:"./src/main.js", // 相对路径
// 输出
output:{
// 文件的输出路径
path:path.resolve(__dirname,"dist"), // 绝对路径,__dirname是指当前文件加的路径,dist是当前文件夹下的文件夹
// 文件名
filename:"main.js",
}
// 加载器
module:{
rules:[
// loader的配置
],
},
// 插件
plugins:[
// plugin的配置
],
// 模式
mode:"development",
};
在配置文件中配置好入口后，打包命令就可以简写成npx webpack
5、webpack处理样式资源
Webpack 本身是不能识别样式资源的，所以需要借助 Loader 来帮助 Webpack 解析样式资源，一般直接去官方文档中找loader，官网 具体详细使用看官网
5.1 处理css样式资源
（1）安装要用的模块
// 负责将 Css 文件编译成 Webpack 能识别的模块
npm install --save-dev css-loader
// 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
npm install --save-dev style-loader
（2）导入css文件
import css from 'style.css';
（3）往配置文件webpack.config.js中的加载器中添加模块
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 正则表达式
use: [ 'style-loader', 'css-loader' ] // 在使用模块时，从右往左依次使用
}
]
}
}
5.2 处理less样式资源
（1）安装要用的模块
// 负责将 Less 文件编译成 Css 文件
npm install --save-dev less-loader less
npm install --save-dev css-loader
npm install -save-dev style-loader
（2）导入less文件
import less from "test.less"
（3）配置文件中的加载器中添加模块
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
同样sass和stylu等样式资源直接看官网即可
5.3 处理图片资源
在 Webpack4 时，处理图片资源通要过 file-loader 和 url-loader 进行处理，现在Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，只需要简单配置即可处理图片资源。
配置如下：
module.exports = {
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"dist"),
filename:"main.js",
},
module:{
rules:[
// 处理样式资源
{
test:/\.css$/,
use:["style-loader","css-loader"],
},
// 处理图片资源
{
test: /\.(png|jpe?g|gif|webp)$/,
type:"asset",
parser:{
dataUrlCondition:{
maxSize:10*1024 // 小于10k的图片会被base64处理
// base64图片体积更大，但会减少请求数量，加载资源更快（直接渲染）
}
}
}
]
},
plugins:[],
mode:"development",
}
base64会将图片转换成字符串的形式在浏览器渲染
6、修改输出文件目录
使用generator生成器
const path= require("path");
module.exports = {
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"dist"),
// 改为js目录下放main.js文件
filename:"js/main.js",
},
module:{
rules:[
// 处理样式资源
{
test:/\.css$/,
use:["style-loader","css-loader"],
},
// 处理图片资源
{
test: /\.(png|jpe?g|gif|webp)$/,
type:"asset",
parser:{
dataUrlCondition:{
maxSize:10*1024 // 小于10k的图片会被base64处理
// base64图片体积更大，但会减少请求数量，加载资源更快（直接渲染）
}
},
generator:{
// 输出图片名称
// [hash:10]：hash是指hash值，用于给图片命名，:10是用来指定hash值的位数
// query指的是携带的参数
// 将图片资源打包后输出到static/images目录下，并且通过hash进行命名
filename:"static/images/[hash:10][ext][query]"
}
}
]
},
plugins:[],
mode:"development",
}
7、自动清空上次打包资源
module.exports = {
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"dist"),
// 改为js目录下放main.js文件
filename:"js/main.js",
// 自动清空上次打包的内容
clean:true, // 原理,在打包前将path整个目录内容清空，再进行打包
},
...
}
8、处理js资源
webpack对js的处理有限，仅仅局限于模块化语法，不能编译其他语法，导致在不同浏览器上运行会产生兼容性问题，针对js兼容性处理，可以使用babel完成，针对代码的格式，使用Eslint来完成。
8.1 eslint
定义：可组装的javascript和jsx检查工具。这句话意思是用来检测js和jsx语法的工具，可以配置各项功能，“可组装”是指react默认支持eslint，而vue需要插件才能支持eslint。
使用
1、配置文件 配置文件有很多种写法： （1）单独创建一个文件，位于项目根目录，选择任意一个作为文件名字，如果同一个目录下有多个配置文件，ESLint 只使用一个。 优先顺序从高到低排序如下：
- eslintrc.js
- eslintrc.cjs
- eslintrc.yaml
- eslintrc.yml
- eslintrc.json
- package.json
（2）在package.json 中 eslintConfig：不需要创建文件，直接在原有文件基础上写
ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可。
2、具体配置信息 以.eslintrc.js配置文件为例
module.exports = {
// 解析选项
parserOptions: {},
// 具体检查规则
rules: {},
// 继承其他规则
extends: [],
// ...
// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};
1、parserOptions解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
}
2、rules中的具体规则 （1）“off” 或 0 - 关闭规则 （2）“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出) （3）“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
rules: {
semi: "error", // 禁止使用分号
// 强制数组方法的回调函数中有 return 语句，否则警告
'array-callback-return': 'warn',
'default-case': [
// 要求 switch 语句中有 default 分支，否则警告
'warn',
{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
],
eqeqeq: [
'warn', // 强制使用 === 和 !==，否则警告
'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
],
}
更多请看eslint规则文档
3、使用extends继承现有规则 开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
现有以下较为有名的规则：
Eslint 官方的规则：eslint:recommended Vue Cli 官方的规则：plugin:vue/essential React Cli 官方的规则：react-app
// 例如在React项目中，我们可以这样写配置
module.exports = {
extends: ["react-app"],
rules: {
// rules中的规则会覆盖掉继承的规则
// 所以想要修改规则直接改就是了
eqeqeq: ["warn", "smart"],
},
};
在webpack中的使用
（1）下载包
npm i eslint-webpack-plugin eslint -D
（2）定义eslint配置文件 例如eslintrc.js
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
3、在webpack.config.js配置文件中添加配置插件
// 引入插件
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
module.export = {
//...
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录下面的代码
context: path.resolve(__dirname, "src"),
}),
],
}
4、打包运行
npx webpack
vscode软件中可以下载eslint插件，即可不用编译就能看到错误，做到提前解决错误。 但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。 可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:.eslintignore，忽略dist目录下所有文件
# 忽略dist目录下所有文件
dist
8.2 babel
主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
使用
1、配置文件 （1）babel.config.*：新建文件,位于项目根目录 1）babel.config.js 2）babel.config.json （2）.babelrc.*：新建文件，位于项目根目录 1）.babelrc 2）.babelrc.js 3）.babelrc.json （3）package.json 中 babel：不需要创建文件，在原有文件基础上写
Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
具体配置
module.exports = {
// 预设
presets: [],
};
presets 预设 简单理解：就是一组 Babel 插件, 扩展 Babel 功能： @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。 @babel/preset-react：一个用来编译 React jsx 语法的预设 @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
在webpack中使用 1、下载包
npm i babel-loader @babel/core @babel/preset-env -D
2、定义babel配置文件 babel.config.js
module.exports = {
presets: ["@babel/preset-env"],
};
3、配置webpack.config.js配置文件
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true, // 自动将上次打包目录资源清空
},
module: {
rules: [
...
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
...
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
...
};
4、运行指令
npx webpack
9、开发环境下自动打包好html资源
（1）下载包
npm i html-webpack-plugin -D
（2）配置
// 引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true, // 自动将上次打包目录资源清空
},
module: {
rules: [
// ...
],
}
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：
// 1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
mode: "development",
};
（3）去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入
（4）运行命令
npx webpack
10、开发环境下自动更新打包数据文件
每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化。
（1）下载包
npm i webpack-dev-server -D
（2）配置
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true, // 自动将上次打包目录资源清空
},
module: {
rules: [
// ...
],
},
plugins: [
// ...
],
// 配置开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
mode: "development",
};
（3）运行指令
npx webpack serve
并且当当用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下
开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。
文章链接
您阅读本篇文章共花了：
发表评论