Node.js与Webpack笔记（二）

上一篇：Node.js与Webpack笔记（一）-CSDN博客

Webpack模块打包工具

1.Webpack简介以及体验

webpack是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

  • 静态模块：编写代码过程中，html，css，js，图片等固定内容的文件
  • 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

2.Webpack的作用

把静态模块内容压缩、整合、转译等（前端工程化）

  • 把 less/sass 转成 css 代码

  • 把 ES6+ 降级成 ES5 等

  • 支持多种模块文件类型，多种模块标准语法

  • 压缩，转译，整合，打包我们的静态模块

4.体验Webpack

如果运行package.json里的自定义命令？

npm run 自定义命令

Webpack 默认入口和出口？
  • src/index.js 和 dist/main.js
入门使用

需求：封装 utils 包，校验手机号和验证码长度，在 src/index.js 中使用，使用 Webpack 打包

需求流程图：

1.新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

npm init -y

2.新建src源代码文件夹，创建src/utils/check.js工具类，封装两个函数

// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6

3.创建src/index.js，导入工具类check.js，调用封装好的函数

import { checkPhone, checkCode} from './utils/check.js';console.log(checkPhone('13900000000'));
console.log(checkPhone('13900000000000'));
console.log(checkCode('123456'));
console.log(checkCode('12345678'));

4.准备webpack打包的环境，下载webpack webpack-cli到项目（版本独立）

--save-dev标注开发环境使用

管理员权限

npm i webpack webpack-cli --save-dev

5.此时可以使用webpack的打包命令webpack了

这一段视频没细讲，我大概的理解是

webpack打包命令就叫做webpack，但这个命令是属于webpack（全局软件包）的，封装的是命令工具，然后有句话没听懂“为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用 ”

反正就是在package.json中的script中，自定义命令（局部命令），命名为build，但实际上调用的还是全局命令webpack，只在本项目中使用

6.运行工具命令，采用自定义命令的方式（局部命令）

npm run build

7.打包结果

        生成dist分发文件夹（压缩和优化后，最终运行的代码），默认生成main.js

5.Webpack修改入口和出口

步骤

1.在项目根目录，创建Webpack.config.js配置文件

2.根据文件路径创建文件夹

3.导出配置对象，配置入口、出口文件路径

const path = require('path');module.exports = {entry: path.resolve(__dirname, './src/login/index.js'),output: {path: path.resolve(__dirname, 'dist'),filename: './login/index.js'}
}

4.重新打包观察

6.黑马资源删了太多，转硅谷

官网笔记

Webpack5视频_Webpack5技术视频教程_尚硅谷Webpack5视频下载 (atguigu.com)

官网文档是用Vuepress开发的，暂时也不清楚这是什么东西，使用方式是（管理员权限）

7.Webpack初识

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

webpack是什么？

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器段运行了。

我们将 Webpack 输出的文件叫做 bundle。

到底要学习webpack什么？

Webpack 本身功能比较少，只能处理 js 、json资源，一旦遇到 css 等其他资源就会报错。

所以我们学习 Webpack，就是主要学习如何处理其他资源。

如果不做任何配置，webpack的功能是很有限的，只能处理js代码，不能处理样式代码等

Webpack 本身功能是有限的:

  • 开发模式：仅能编译 JS 中的 ES Module 语法

  • 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码
入门体验
1.资源目录
webpack_code # 项目根目录（所有指令必须在这个目录运行）└── src # 项目源码目录├── js # js文件目录│   ├── count.js│   └── sum.js└── main.js # 项目主文件
2.编写代码
  • count.js
export default function count(x, y){return x - y;
}
  • sum.js
export default function sum(...args){return args.reduce((result, item) => result + item, 0);
}
  • main.js
import count from './js/count.js';
import sum from './js/sum.js';console.log(count(2,1)); // result： 1
console.log(sum(1,2,3,4)); // result： 10
 3.下载依赖
  • 初始化package.json

包描述文件package.json中的name值不允许为webpack，因为被占用，否则webpack依赖就下载失败

别忘了看一下默认入口是否需要修改

  • 下载依赖

下载两个依赖，一个webpack一个webpack-cli，选择开发环境-D或者-save-dev

4.启用Webpack打包项目

黑马这里教的是在package.json的script中，自定义命令"build": "webpack"，将全局命令当做局部命令使用

命令npx，这个命令会将依赖包中的.bin目录临时添加到环境变量

可以运行这些.cmd程序

  • 开发模式

仅仅对ES6语法进行编译

npx webpack ./src/main.js --mode=development

打包完成自动生成dist文件夹

  • 生产模式

不仅编译ES6语法，还有压缩等功能

npx webpack ./src/main.js --mode=production

  • 总结
npx webpack: 是用来运行本地安装 Webpack 包的。./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。--mode=xxx：指定模式（环境）。
xxx: development 开发模式
xxx: production生产模式
5.测试

创建静态html，引入打包输出的/dist/main.js，查看是否成功打包相关联的三个js文件

控制台效果

8.Webpack5大核心概念

在学习配置Webpack之前，先了解核心概念

entry（入口）
指示 Webpack 从哪个文件开始打包output（输出）
指示 Webpack 打包完的文件输出到哪里去，如何命名等loader（加载器）
webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析plugins（插件）
扩展 Webpack 的功能mode（模式）
主要由两种模式：开发模式：development
生产模式：production

9.Webpack配置 (webpack.config.js)

webpack.config.js配置文件运行在node.js环境中，所以Node.js模块化使用的是CommonJS模块化

在项目根目录创建，注意大小写

配置一个等价于原始webpack功能

注意看，只是配置了，打包入口和出口，配置了开发模式，无插件无加载器，等价于没有配置，依旧不能处理样式文件等，等价于 npx webpack ./src/main.js --mode=development

// 顺序无要求// node.js核心模块path，专门处理路径
const path = require('path');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 全部文件输出路径output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "main.js",},// 加载器：module: {rules: [// loader的配置]},// 插件plugins:[// plugin的配置],// 模式mode: "development",// 选择开发模式
}

但是，打包命令就可以写的简单一点了

开发模式配置
开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事：1.编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源2.代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
处理各种文件资源

本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Stylus 样式资源

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

官方文档找不到的话，可以从社区 Github 中搜索查询

官方文档：Loaders | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

1.处理CSS样式资源

如果使用css-loader，需要安装Webpack@5

  • 首先需要安装 css-loader 与 style-loader
// css-loader将css资源编译成CommonJS的模块到JS中
npm install --save-dev css-loader// style-loader将js中的css通过创建style标签的方式添加到html文件中生效
npm install --save-dev style-loader
  • 创建.css文件
span {color: red;
}

  • 在入口文件导入css文件

  • 配置
// node.js核心模块path，专门处理路径
const path = require('path');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "main.js",},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},]},// 插件plugins:[// plugin的配置],// 模式mode: "development",// 选择开发模式
}
  • 运行webpack

2.处理Less、Sass、Scss、Stylus样式资源

CSS、less、Sass、Scss、Stylus的认识-CSDN博客

css-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

暂时只学过Sass，就不详细写了，这段教程跳过，配置也差不多，唯一注意Scss是Sass的升级版，其实一样的，需要什么loader直接下载就好

const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},],},plugins: [],mode: "development",
};
3.处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

在官网搜索“资源模块”，有相关内容

资源模块 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

  • 配置

图形优化，将小于某个大小的图片转化成 data URI 形式（Base64 格式）

// node.js核心模块path，专门处理路径
const path = require('path');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "main.js",},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},}]},// 插件plugins:[// plugin的配置],// 模式mode: "development",// 选择开发模式
}
  • 准备资源

准备一个盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../dist/main.js"></script>
</head>
<body><span>hello webpack</span><br><!-- <div class="imgDiv01"><img src="../img/01.png" alt="图片加载失败喔，原图片是个科技脸美女"><img src="../img/02.png" alt="加载失败"></div> --><div class="imgDiv01"></div>
</body>
</html>

准备样式，被盒子背景插个图片

span {color: red;
}
.imgDiv01{/* max-width: 100%;height: auto; */width: 100px;height: 100px;background-image: url('../../img/01.png');background-size: cover;
}
  • 打包

此时会发现输出目录dist里多了一张图片（如果图片小于10kb，那么依旧会下载js文件中）

  •  运行

4.为什么样式文件没有单独输出为一个文件，而是写在js中？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来

5.修改输出文件目录

打包后输出的文件全放在dist目录中，太乱了，自定义输出文件目录，使得图片在img，js在js等

// [hash]表示会生成一个唯一的id
// [ext]表示原来是什么后缀扩展名，那么依旧生成什么后缀
// [query]表示有时候这个文件名后可以带有参数
generator: {filename: 'static/[hash][ext][query]'}

 

hash值生成默认20位，可以只取前8位 

  • 修改JS文件输出目录

  • 修改图片文件输出目录

官网搜索 asset

webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

// node.js核心模块path，专门处理路径
const path = require('path');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "js/main.js",},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},generator: {filename: 'static/img/[hash][ext][query]',}}]},// 插件plugins:[// plugin的配置],// 模式mode: "development",// 选择开发模式
}
6.打包时自动清空上次打包资源

webpack5新出的命令clean

7.处理文字图标资源

阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库

bootstrap图标库：Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库 (bootcss.com)

我们这里使用阿里巴巴矢量图标库

  • 选择自己喜欢的图标然后入库

  • 将图标添加到项目中

  • 一键下载至本地

  • 解压后浏览器运行index文件查看教程

一般使用Font class，兼容性ie8，代码最简洁

1. 引入.css

2. 使用类名标注

  • 将css文件复制到项目中

新的css别忘记引入入口文件

  • 将css依赖的字体文件复制到项目中

  • 修改依赖的字体文件的路径

  • 配置字体图标输出路径

// node.js核心模块path，专门处理路径
const path = require('path');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "./js/main.js",clean: true,},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},generator: {filename: './static/img/[hash:8][ext][query]',}},// 处理字体图标文件{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: './static/media/[hash:8][ext][query]',}}]},// 插件plugins:[// plugin的配置],// 模式mode: "development",// 选择开发模式
}

8.type: asset与 type: asset/resource的区别
  1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
  2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
9.处理音视频资源

webpack会对音视频资源原封不动的输出出去，不会做任何改动

打包后发现并不会输出视频文件到dist目录中

10.处理JS文件资源

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，IE浏览器根本不支持任何ES6语法，所以我们希望做一些兼容性处理，至少能在IE11看到运行效果。

其次开发中，团队对代码格式是有严格要求的，多个程序猿开发同一个项目需要规范格式，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

  • 针对 js 兼容性处理，我们使用 Babel 来完成
  • 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

11.Eslint介绍

官网：文档 - ESLint 中文网 (nodejs.cn)

是一个可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

  • 为什么Eslint支持JS原生和React的JSX，而不支持VUE呢？

Eslint的开发团队是Facebook旗下的，自然要支持自家的React

不过不用担心，Eslint是一个可组装的工具，添加一些插件，就支持VUE模板语法了

  • Eslint的配置文件有至少四种写法

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

js格式可以写注释，更符合日常写代码的习惯，所以选择js格式

module.exports = {// 解析选项parserOptions: {},// 具体检查规则rules: {},// 继承其他规则extends: [],// ...
};
  • parserOptions解析选项
parserOptions: {ecmaVersion: 6, // ES 语法版本sourceType: "module", // ES 模块化ecmaFeatures: { // ES 其他特性jsx: true // 如果是 React 项目，就需要开启 jsx 语法}
}
  • rules规则
  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

官方规则文档：规则参考 - ESLint - 插件化的 JavaScript 代码检查工具

rules: {semi: "error", // 禁止使用分号'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告'default-case': ['warn', // 要求 switch 语句中有 default 分支，否则警告{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了],eqeqeq: ['warn', // 强制使用 === 和 !==，否则警告'smart' // https://eslint.org/docs/latest/rules/eqeqeq#smart 
//除了少数情况下不会有警告],
}
  •  extends继承

开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

继承官方的规则不用下载，如果其他规则需要下载

// 例如在React项目中，我们可以这样写配置
module.exports = {extends: ["react-app"],rules: {// 我们的规则会覆盖掉react-app的规则// 所以想要修改规则直接改就是了eqeqeq: ["warn", "smart"],},
};
  • Eslint官方内置规则 规则参考 - ESLint - 插件化的 JavaScript 代码检查工具

在配置文件中写上 "extends": "eslint:recommended"

  • Vue-cli官方的规则 vue-cli/packages/@vue/cli-plugin-eslint at dev · vuejs/vue-cli · GitHub
  • React-cli官方的规则 create-react-app/packages/eslint-config-react-app at main · facebook/create-react-app · GitHub
12.在webpack5中使用Eslint

在webpack4中是用一个loader处理Eslint，在webpack5中则是plugin

EslintWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

测试需求，配置检查src下的所有文件不能出现var变量

  • 安装插件
npm i eslint eslint-webpack-plugin --save-dev

 

  • 定义.eslintrc.js配置文件
module.exports = {// 继承 Eslint 规则extends: ["eslint:recommended"],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6,sourceType: "module",},rules: {"no-var": 2, // 不能使用 var 定义变量},};
  • webpack.config.js中引入与管理插件

// node.js核心模块path，专门处理路径
const path = require('path');// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "./js/main.js",clean: true,},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},generator: {filename: './static/img/[hash:8][ext][query]',}},// 处理字体图标文件,以及媒体文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: "asset/resource",generator: {filename: './static/media/[hash:8][ext][query]',}}]},// 插件plugins:[// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录，即src下的所有文件都会被检查context: path.resolve(__dirname, './src'),}),],// 模式mode: "development",// 选择开发模式
}
  • 故意犯错 

 

  • 打包结果

13.VSCode-Eslint插件

这个插件可以实时检测代码格式，就不用编译的时候才去报错了

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们开发时候只需要检查 src 下面自己写的源代码，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

  • .eslintignore
# 忽略dist目录下所有文件
dist

 .eslintignore有可能不生效，有一个办法是在.eslintrc.js中写上：

网上也有其他办法，但是暂时也不会用

VSCode ESLint 插件 .eslintignore 文件不生效原因[转] – 后除 (mazey.net)

  • .eslintrc.js
module.exports = {// 继承 Eslint 规则extends: ["eslint:recommended"],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6,sourceType: "module",},rules: {"no-var": 2, // 不能使用 var 定义变量},ignorePatterns: ["dist"],};
14.Babel介绍

Babal在webpack中是用一个loader去处理

babel-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

Babel 是什么？ · Babel 中文文档 | Babel中文网 (babeljs.cn)

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中，比如ES6的箭头函数等，typescript等

配置文件由很多种写法：

  • babel.config.*：新建文件，位于项目根目录
    • babel.config.js
    • babel.config.json
  • .babelrc.*：新建文件，位于项目根目录
    • .babelrc
    • .babelrc.js
    • .babelrc.json
  • package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

这里选择js文件的形式配置

  • babel的预设

babel本身什么都做不了，它的关键在于它的预设presets

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
15.在Webpack5中使用Babel
  • 安装依赖
npm install -D babel-loader @babel/core @babel/preset-env
  • 根目录创建babel.config.js
module.exports = {// @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。// @babel/preset-react：一个用来编译 React jsx 语法的预设// @babel/preset-typescript：一个用来编译 TypeScript 语法的预设presets: ["@babel/preset-env"],
}
  • webpack.config.js引入loader

// node.js核心模块path，专门处理路径
const path = require('path');// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "./js/main.js",clean: true,},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{ test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},generator: {filename: './static/img/[hash:8][ext][query]',}},// 处理字体图标文件,以及媒体文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: "asset/resource",generator: {filename: './static/media/[hash:8][ext][query]',}},// Babel, JS解析器{test: /\.js$/, exclude: /node_modules/, // 第三方的js文件我们不处理，exclude: 排除loader: 'babel-loader',},]},// 插件plugins:[// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录，即src下的所有文件都会被检查context: path.resolve(__dirname, './src'),}),],// 模式mode: "development",// 选择开发模式
}
  • 打包测试

源输出js还有ES6的箭头函数

变成ES5写法了

16.处理HTML资源

HTML不再需要自己手动引入打包后的js文件了，千万不要手动引入了

新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。  

如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的 <script> 标签内引入。

如果在 webpack 的输出中有任何 CSS 资源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入。

webpack官网搜索：HtmlWebpackPlugin

HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

  • webpack.config.js

// node.js核心模块path，专门处理路径
const path = require('path');// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "./js/main.js",clean: true,},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{ test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},generator: {filename: './static/img/[hash:8][ext][query]',}},// 处理字体图标文件,以及媒体文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: "asset/resource",generator: {filename: './static/media/[hash:8][ext][query]',}},// Babel, JS解析器{test: /\.js$/, exclude: /node_modules/, // 第三方的js文件我们不处理，exclude: 排除loader: 'babel-loader',},]},// 插件plugins:[// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录，即src下的所有文件都会被检查context: path.resolve(__dirname, './src'),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "public/index.html"),})],// 模式mode: "development",// 选择开发模式
}

以原html为模板，输出一个新的html，并且自动引入多个bundle，相关依赖也自动引入，有多少引入多少

  • 打包

  • 运行依旧没问题

开发服务器&自动化

每次改动代码后需要重新编译打包npx webpack，也可以自动化

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

主要提供了2个功能：

  1. 为静态文件提供服务
  2. 自动刷新和热替换(HMR)

并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

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

  • 安装依赖
npm i webpack-dev-server -D
  • webpack.config.js

// node.js核心模块path，专门处理路径
const path = require('path');// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {// 入口entry: "./src/main.js",// 使用相对路径// 输出output: {// __dirname node.js的变量，获取当前项目根目录的绝对路径// 第二个参数为目标文件的文件夹path: path.resolve(__dirname, "dist"),// 入口文件名filename: "./js/main.js",clean: true,},// 加载器：module: {rules: [// loader的配置{// 正则匹配一个 以 .css结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左// style-loader将js中的css通过创建style标签添加到html文件中生效// css-loader将css资源编译成CommonJS的模块到js中use: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{ test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024 // 小于10kb的图片，转换base64的字符串},},generator: {filename: './static/img/[hash:8][ext][query]',}},// 处理字体图标文件,以及媒体文件{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: "asset/resource",generator: {filename: './static/media/[hash:8][ext][query]',}},// Babel, JS解析器{test: /\.js$/, exclude: /node_modules/, // 第三方的js文件我们不处理，exclude: 排除loader: 'babel-loader',},]},// 插件plugins:[// plugin的配置new ESLintPlugin({// context指定需要检查的文件根目录，即src下的所有文件都会被检查context: path.resolve(__dirname, './src'),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "public/index.html"),})],// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3030", // 启动服务器端口号open: true, // 是否自动打开浏览器},// 模式mode: "development",// 选择开发模式
}
 运行指令

不是npx webpack

npx webpack serve
关闭服务器 
ctrl + c
问题：视频文件失效了

ChatGPT告诉我：webpack-dev-server默认是不支持在内存中存储二进制文件（例如视频文件）的

将视频文件放置在public目录下，与index.html放在一起然后重新启动webpack-dev-server，视频就可以正常播放了，虽然我不清楚这有什么区别, 但确实有用。

(本节完)

下一节：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/731893.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

统计接口调用耗时情况设计思路（大厂面试题）

统计接口调用耗时情况设计思路（大厂面试题）

gateway统计接口调用耗时情况设计思路&#xff08;大厂面试题&#xff09; 详情视频可以去看尚硅谷2024周阳老师的springCloud P86 知识出处自定义全局过滤器官网https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#gateway-combined-global-filter-…
阅读更多...
vue结合vue-electron创建应用程序

vue结合vue-electron创建应用程序

这里写自定义目录标题 安装electron第一种方式&#xff1a;vue init electron-vue第二种方式&#xff1a;vue add electron-builder 启动electron调试功能&#xff1a;background操作和使用1、覆盖窗口的菜单上下文、右键菜单2、监听关闭事件、阻止默认行为3、创建悬浮窗口4、窗…
阅读更多...
C/C++蓝桥杯之模拟法问题

C/C++蓝桥杯之模拟法问题

模拟法&#xff0c;顾名思义&#xff0c;就是利用计算机模拟问题的求解过程&#xff0c;从而得到问题的解&#xff0c;模拟法由于简单&#xff0c;因此又被称为"不是算法的算法"。 模拟法是学习算法的基础&#xff0c;通过模拟可以学习编程的各类技巧&#xff0c;提…
阅读更多...
css 背景图片居中显示

css 背景图片居中显示

background 简写 background: #ffffff url(https://profile-avatar.csdnimg.cn/b9abdd57de464582860bf8ade52373b6_misnice.jpg) center center / 100% no-repeat;效果如图&#xff1a;
阅读更多...
Docker安装shell脚本

Docker安装shell脚本

#!/bin/sh # 1、查看安装过的docker&#xff1a; dockerlistyum list installed | grep docker dlength${#dockerlist[]} ditem${dockerlist[0]} # 2、卸载docker&#xff1a; #for loop for ditem in ${dockerlist[]} do echo yum remove -y ${ditem} echo "remo…
阅读更多...
关于手机是否支持h264的问题的解决方案

关于手机是否支持h264的问题的解决方案

目录 现象 原理 修改内容 现象 开始以为是手机不支持h264的编码 。机器人chatgpt一通乱扯。 后来检查了下手机&#xff0c;明显是有h264嘛。 终于搞定&#xff0c;不枉凌晨三点起来思考 原理 WebRTC 默认使用的视频编码器是VP8和VP9&#xff0c;WebRTC内置了这两种编码器…
阅读更多...
Centos 安装 redis【最简单】

Centos 安装 redis【最简单】

Centos7 使⽤ yum 安装 ⾸先安装 scl 源, 再安装 redis &#xff08;因为 Centos7 yum 提供的软件包只有 3.0 版本的 Redis &#xff0c;太老了&#xff0c;我们要安装 redis 5 系列的&#xff09; yum install centos-release-scl-rh yum install rh-redis5-redis 创建符号…
阅读更多...
15-单片机烧录FreeTOS操作系统后，程序的执行流程

15-单片机烧录FreeTOS操作系统后，程序的执行流程

任务创建 1、在系统上电后&#xff0c;第一个执行的是启动文件由汇编语言编写的复位函数 通过复位函数来初始化系统的时钟&#xff0c;然后再执行__main,初始化系统的堆和栈&#xff0c;然后跳转到main函数 2、在main函数中可以直接进行任务创建操作 因为在FreeRTOS中会自动…
阅读更多...
GSEA -- 学习记录

GSEA -- 学习记录

文章目录 brief统计学原理部分其他注意事项转录组部分单细胞部分 brief 上一篇学习记录写了ORA&#xff0c;其中ORA方法只关心差异表达基因而不关心其上调、下调的方向&#xff0c;也许同一条通路里既有显著高表达的基因&#xff0c;也有显著低表达的基因&#xff0c;因此最后…
阅读更多...
解决问题的九大步骤

解决问题的九大步骤

1.明确问题&#xff1a;确保准确理解问题的本质和范围&#xff0c;明确问题的背景和相关信息。 2.收集信息&#xff1a;搜集相关数据、资料和信息&#xff0c;了解问题的各个方面&#xff0c;为解决问题做准备。 3.分析问题&#xff1a;对问题进行深入分析&#xff0c;找出问…
阅读更多...
3.7号freeRtoS

3.7号freeRtoS

1. 串口通信 配置串口为异步通信 设置波特率&#xff0c;数据位&#xff0c;校验位&#xff0c;停止位&#xff0c;数据的方向 同步通信 在同步通信中&#xff0c;数据的传输是在发送端和接收端之间通过一个共享的时钟信号进行同步的。这意味着发送端和接收端的时钟需要保持…
阅读更多...
990-44产品经理:Different types of Ethical Theories 不同类型的伦理理论

990-44产品经理:Different types of Ethical Theories 不同类型的伦理理论

SLIDE 1 – INTRODUCTORY SLIDE 幻灯片1-介绍性幻灯片 Ethical theories provide part of the decision-making foundation for Decision Making When Ethics Are In Play because these theories represent the viewpoints from which individuals seek guidance as they mak…
阅读更多...
「Vue3系列」Vue3 组合式 API 生命周期钩子

「Vue3系列」Vue3 组合式 API 生命周期钩子

文章目录 一、Vue3 组合式 API 生命周期钩子1. onMounted2. onUnmounted3. onBeforeMount4. onUpdated5. onBeforeUpdate6. onErrorCaptured7. onActivated8. onDeactivated 二、Options API 和 Composition API 之间的映射三、组合式 API四、相关链接 一、Vue3 组合式 API 生命…
阅读更多...
2024.2.3 校招 实习 内推 面经

2024.2.3 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 禾赛科技2024届春招全面开启&#xff01; 校招 | 禾赛科技2024届春招全面开启&#xff01; 2、校招 | 格力电器2024届春招简历可投递 校招 | 格力电器2024届春招简历可投递 3、…
阅读更多...
视频编解码技术介绍 - 基本概念篇

视频编解码技术介绍 - 基本概念篇

第一章 视频编解码技术介绍 - 基本概念篇 文章目录 前言1. 我的疑问1.1 什么是视频编解码技术1.2 为什么会有视频编解码技术1.3 视频编解码中有哪些核心技术1.4 作为开发者需要重点了解视频编解码中的哪些技术 2. 视频编解码的历史3. 基本概念3.1 像素3.2 分辨率3.3 ppi(像素密…
阅读更多...
前端 类数组对象 学习

前端 类数组对象 学习

首先&#xff0c;我们先预习一下对象数组和数组对象的概念&#xff1a; 对象数组&#xff1a;指的是一个数组&#xff0c;其中的每个元素都是一个对象。这些对象可以包含多个属性&#xff0c;形成一个包含多个对象的数组结构。比如下面这个&#xff1a; // 创建一个对象数组存…
阅读更多...
CorelDRAW下载2024最新版专业的平面设计软件,专注于矢量图形编辑与排版

CorelDRAW下载2024最新版专业的平面设计软件,专注于矢量图形编辑与排版

CorelDRAW是一款功能强大的矢量图形设计软件&#xff0c;广泛应用于标志设计、插画绘制、排版印刷、VI设计、包装设计、网页制作等众多领域。它提供了丰富的绘图工具和特效&#xff0c;使用户能够轻松地创建和编辑复杂的矢量图形。CorelDRAW还支持导入和导出多种文件格式&#…
阅读更多...
RabbitMQ 安装使用

RabbitMQ 安装使用

文章目录 RabbitMQ 安装使用安装下载 Erlang下载 RabbitMQ 的服务安装好后看是否有 RabbitMQ 的服务开启管理 UIRabbitMQ 端口使用一览图 使用输出最简单的 Hello World&#xff01;生产者定义消费者消费消息小拓展 RabbitMQ 安装使用 安装 下载 Erlang RabbitMQ 是用这个语…
阅读更多...
【机器学习300问】30、准确率的局限性在哪里？

【机器学习300问】30、准确率的局限性在哪里？

一、什么是准确率&#xff1f; 在解答这个问题之前&#xff0c;我们首先得先回顾一下准确率的定义&#xff0c;准确率是机器学习分类问题中一个很直观的指标&#xff0c;它告诉我们模型正确预测的比例&#xff0c;即 还是用我最喜欢的方式&#xff0c;举例子来解释一下&#xf…
阅读更多...
倒计时35天

倒计时35天

dp预备(来源&#xff1a;b站acm刘春英老师) 1. 2. 3. 4. 5. 6. 7.
阅读更多...
最新文章

Copyright @ 2022~2023