webpack5入门配置

一、 功能介绍

Webpack 本身功能是有限的:

  • 开发模式:仅能编译 JS 中的 ES Module 语法
  • 生产模式:能编译 JS 中的 ES Module 语法,还能压缩 JS 代码

二、webpack的基本使用

  1. 在项目中安装依赖
jacascript 复制代码
npm i webpack webpack-cli -D
  1. 指定入口文件进行打包

在开发模式下打包

jacascript 复制代码
npx webpack ./src/main.js --mode=development

在开发生产模式下打包

jacascript 复制代码
npx webpack ./src/main.js --mode=production
  1. 文件输出

默认 Webpack 会将文件打包输出到 dist 目录下,我们查看 dist 目录下文件情况就好了

三、webpack的各项配置

在项目中使用webpack个性化配置时,需要在项目根目录新建文件webpack.config.js

javascript 复制代码
module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

Webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范

修改配置文件

javascript 复制代码
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录,必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

运行命令:npx webpack

四、样式处理配置

1. css

安装依赖:npm i css-loader style-loader -D

css-loader:负责将 Css 文件编译成 Webpack 能识别的模块

style-loader:会动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容

2. less

安装依赖:npm i npm i less-loader -D

less-loader:负责将 Less 文件编译成 Css 文件

3. scss

安装依赖:npm i sass-loader sass -D

sass-loader:负责将 Sass 文件编译成 css 文件

sass:sass-loader 依赖 sass 进行编译

配置:

javascript 复制代码
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
   ...
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

注意:use 数组里面 Loader 执行顺序是从右到左

四、图片资源处理配置

过去在 Webpack4 时,我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源

配置如下:

javascript 复制代码
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    ...
  },
  module: {
    rules: [
      ...,
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

图片资源的优化:

javascript 复制代码
...,
module: {
    rules: [
      ...,
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        //解析过程中,小于10kb的图片会被base64处理
		parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      },
    ],
  },

四、字体图标资源处理配置

javascript 复制代码
...,
module: {
    rules: [
      ...,
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },

type: "asset/resource"type: "asset"的区别:

  • type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源,其他不做处理
  • type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式

四、其他资源处理配置(视频、音频等)

就是在处理字体图标资源基础上增加其他文件类型,统一处理即可

javascript 复制代码
...,
module: {
    rules: [
      ...,
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
相关推荐
ygming5 分钟前
Q43- code973- 最接近原点的 K 个点 + Q44- code347- 前 K 个高频元素
前端·算法
ygming6 分钟前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a7 分钟前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽7 分钟前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku9 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)14 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江31 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码31 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说36 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015537 分钟前
最常用的JS加解密场景MD5
前端