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

这篇具有很好参考价值的文章主要介绍了webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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文件夹，打包好的文件就在这个文件夹中。
开发模式下打包好的文件大致如下：
webpack5,项目打包工具,webpack5,前端

生产模式下打包好的文件大致如下，可以发现js代码进行压缩了
webpack5,项目打包工具,webpack5,前端

使用

使用时，因为页面不能解析模块化语法，所以需要引入经过打包好并且重新编译好的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，官网
webpack5,项目打包工具,webpack5,前端
具体详细使用看官网

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

开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。文章来源地址https://www.toymoban.com/news/detail-770129.html

到了这里，关于webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！