webpack主要构成部分：
- entry 入口
- output 出口
- loaders 转化器
- plugins 插件
- mode 模式
- devServer 开发服务器
webpack.config.js 配置文件基本格式
module.exports={//入口文件entry:{},//出口文件output:{},//module rules loadersmodule{};//插件plugins:[],//开发服务器devServer:{},//模式mode: " ",
};
详细讲解：
一：入口（Entry）：告诉 webpack 应该使用哪个模块，来作为构建整个项目的开始
二：出口（Output）：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件
1、单文件入口语法：
用法：entry: string | [string]
const path = require('path');
module.exports = {entry: './src/index.js ',output:{path:path.resolve(__dirname, 'dist'),filename:'bundle.js'}
};
2、多入口，单出口文件的配置：
const path = require('path');
module.exports = {
entry:['./src/index.js','./src/index2.js'], //按照先后顺序一起打包 bundle.js
output:{path:path.resolve(__dirname, 'dist'),filename:'bundle.js'}
};
3、多入口，多出口文件的配置
const path = require('path');module.exports = {entry:{index:'./src/index.js',index2:'./src/index2.js'},output:{path:path.resolve(__dirname, 'dist'),filename:'[name].bundle.js'}};
还需要在index.html文件引入js文件的时候，内容改一下。这种方法引入比较繁琐，后面可以使用插件来完成这个功能。
三.加载器（Loader）：webpack 只能理解 JS 和 JSON 文件，loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。
例如：css-loader | html-loader
1、处理css文件
（1）安装loader：npm i style-loader css-loader -D
（2）配置文件里的写法：
module:{rules:[{test:/\.css$/,use:['style-loader','css-loader'] //注意先写style-loader再写css-loader}]}
（3）然后执行webpack命令。
2、处理less文件
（1）安装loader：npm i style-loader css-loader less-loader -D
//如果装过style-loader css-loader这里可以不用写这两个loader
（2）配置文件里的写法：
module:{rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader'] //注意先写style-loader再写css-loader}]
}
（3）然后执行webpack命令。
3、处理sass文件
（1）安装loader：npm i style-loader css-loader sass-loader -D
//如果装过style-loader css-loader这里可以不用写这两个loader
（2）配置文件里的写法：
module:{rules:[{test:/\.s[a,c]ss$/,use:['style-loader','css-loader','sass-loader'] //注意先写style-loader再写css-loader}]}
（3）然后执行webpack命令。
注意：如果上面的操作中如安装less的时候，报错Vue安装loader报错：Syntax Error: Error: Cannot find module ‘less‘ 类似的信息，解决方法是：重新安装这个loader时@版本号就可以了，例如：npm i less-loader@6 -D就可以了。
4、处理图片资源
在webpack5中处理图片资源不用安装loader了,直接在配置文件中设置图片属性内容。
// 图片加载器
module: {rules: [{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {// 小于10KB图片会转base64, 优点:减少请求数量 缺点:体积变大maxSize: 15 * 1024 // 4kb}},//设置图片打包后的图片路径generator: {// 输出图片名字filename: 'static/images/[hash:10][ext][query]' //[hash:10] 表示hash值只取10位}}]
},
5、处理字体图标资源
前面省去了将字体图标引入文件的步骤。直接展示配置文件设置内容：
module: {rules: [// 图标{test: /\.(ttf|woff2?)$/,type: 'asset/resource', generator: {// 输出名字filename: 'static/media/[hash:10][ext][query]' //注意实际设置的路径}}]
},
- 安装babel-loder
用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法。
（1）下载包管理工具
npm i babel-loader @babel/core @babel/preset-env -D
（2）定义 Babel 配置文件：babel.config.js
module.exports = {presets: ["@babel/preset-env"],
};
presets 预设：就是一组 Babel 插件, 扩展 Babel 功能
@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。@babel/preset-react：一个用来编译 React jsx 语法的预设@babel/preset-typescript：一个用来编译 TypeScript 语法的预设
（3）配置webpack.config.js
module: {rules: [// 图标{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},]
},
- 处理其他资源如音/视频等等
module: {rules: [{test: /\.(map3|map4|avi)$/, //在这里加上就可以统一处理type: 'asset/resource',generator: {// 输出名字filename: 'static/media/[hash:10][ext][query]' }]
四.插件（Plugins）：插件是 webpack 的支柱功能，能够执行范围更广的任务，包括：打包优化、压缩、重新定义环境中的变量等
例如：html-webpack-plugin
1、eslint语法检查
在webpack5中eslint语法检查是个插件，它的实现步骤是：
（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 定义变量},
};
更多规则详见：[规则文档](https://eslint.bootcss.com/docs/rules/)
(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: [ {// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},]
}，
plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),],mode: "development",
}
（4）修改 js 文件代码
main.js文件
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);
（5）用webpack打包，生成会发现报错了，原因是main.js中不应该用var定义变量，按照.eslintrc.js定义的规则中，是不能用var 定义变量的，所以改成const后，打包就不会报错了。
五.模式（Mode）：
development（优化打包速度，提供调试的辅助功能）开发
production（优化打包结果，打包之后代码的运行效率和性能优化）生产
none（最原始的打包）
六.devServer：（用于快速开发应用程序）热重载
devServer: {}
开发服务器&自动化
1、下载安装包
npm i webpack-dev-server -D
2、配置webpack.config.js
module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [ // 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: "development",
};
3、运行指令
npx webpack serve