【Webpack】基本配置

核心概念

  1. entry(入口)

指示 Webpack 从哪个文件开始打包

  1. output(输出)

指示 Webpack 打包完的文件输出到哪里去,如何命名等

  1. loader(加载器)

webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析

  1. plugins(插件)

扩展 Webpack 的功能

  1. mode(模式)

主要由两种模式:

  • 开发模式:development
  • 生产模式:production

准备 Webpack 配置文件

在项目根目录下新建文件:webpack.config.js

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

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

修改配置文件

  1. 配置文件

    // 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",
    },
    // 加载器
    module: {
    rules: [],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "development", // 开发模式
    };

  2. 运行指令

    npx webpack

此时功能和之前一样,也不能处理样式资源。

开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事:

  1. 编译代码,使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源

  1. 代码质量检查,树立代码规范

提前检查代码的一些隐患,让代码运行时能更加健壮。

提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。

小结

Webpack 将来都通过 webpack.config.js 文件进行配置,来增强 Webpack 的功能。

相关推荐
艾小码19 小时前
2025年,我为什么建议你先学React再学Vue?
前端·vue.js·react.js
谢尔登19 小时前
【GitLab/CI】前端 CI
前端·ci/cd·gitlab
Predestination王瀞潞20 小时前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
静西子1 天前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果1 天前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv1 天前
10月25日
前端·javascript·vue.js
万邦科技Lafite1 天前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied1 天前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊1 天前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友1 天前
设计模式有哪几类?
前端·后端·设计模式