webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

持久的棒棒君

已于 2023-08-25 17:31:52 修改

阅读量2k

点赞数 1

分类专栏：大杂烩文章标签： webpack5 前端

于 2022-07-22 23:45:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/125559413

版权

大杂烩专栏收录该内容

259 篇文章 2 订阅

订阅专栏

文章目录

webpack5基础
1、webpack5简介
2、webpack5大核心概念
3、打包js文件
创建文件
下载依赖
启用webpack
打包结果
使用

4、webpack配置文件webpack.config.js
5、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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../dist/main.js"></script>
</body>
</html>

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 目录下

开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

持久的棒棒君

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
复制链接

扫一扫