webpack5 的五大核心配置（二）

webpack主要构成部分：

1. entry 入口
2. output 出口
3. loaders 转化器
4. plugins 插件
5. mode 模式
6. 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]'   //注意实际设置的路径}}]
},

1. 安装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",},]
},

1. 处理其他资源如音/视频等等

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