webpack5 的五大核心配置（二）

webpack主要构成部分：

entry 入口
output 出口
loaders 转化器
plugins 插件
mode 模式
devServer 开发服务器

webpack.config.js 配置文件基本格式

module.exports={
   //入口文件
   entry:{},

   //出口文件
   output:{},

   //module rules  loaders
   module{};

   //插件
   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