当前位置： 首页 > article >正文

webpack5 的五大核心配置（二）

article 2024/12/1 1:23:31
webpack主要构成部分：
  1. entry 入口
  2. output 出口
  3. loaders 转化器
  4. plugins 插件
  5. mode 模式
  6. 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]'   //注意实际设置的路径
            }
        }
    ]
},
  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

http://www.kler.cn/a/416366.html

相关文章：

  • 【C++笔记】位图和布隆过滤器
  • 极致性能：19个Vue 项目的优化手段
  • 进程的知识
  • 658.找到K个最接近的元素（双指针）
  • Wireshark 4.4.2：安全更新、错误修复、更新协议支持
  • 在Manjaro Gnome桌面的基础上安装Budgie桌面环境
  • redis中的bigkey及读取优化
  • 深度学习3：数据预处理使用Pandas与PyTorch的实践
  • 全面解析 MySQL 常见问题的排查与解决方法
  • USB-C取电协议芯片与LDR6328的功能解析
  • 【设计模式】创建型模式之单例模式（饿汉式 懒汉式 Golang实现）
  • SpringBoot小知识(2)：日志
  • 揭示Lyapunov方法的奥秘：控制理论中的稳定性之钥
  • 力扣96：不同的二叉搜索树
  • Docker 部署Nginx 数据卷挂载 配置文件挂载
  • Python 绘制 向量减法
  • LeetCode 3208. 交替组 II
  • 【Linux网络编程】TCP套接字
  • 《硬件架构的艺术》笔记（九）：电磁兼容性能设计指南
  • AI自动化剪辑工具：可将长视频中精彩部分提取合成短视频
  • 《C/C++ 链接数据库（MySQL）超级详细指南》
  • 文件从电脑上删除后，去了哪里？
  • Docker 容器网络创建网桥链接
  • 如何构建一个高效安全的图书管理系统
  • 【Linux】-操作系统
  • C# 索引器（Indexer）