Webpack的基础配置

一、概念

本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

从 v4.0.0 开始,webpack 可以不用再引入一个配置文件 来打包项目,然而,它仍然有着 高度可配置性,可以很好满足你的需求。

二、基本使用

2.1 功能介绍

Webpack 本身功能是有限的:

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

2.2 开始使用

2.1.1 资源目录

复制代码
webpack_code # 项目根目录(所有指令必须在这个目录运行)
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2.1.2 创建文件

👉 count.js

javascript 复制代码
export default function count (x, y) {
  return x - y
}

👉 sum.js

javascript 复制代码
export default function sum (...args) {
  return args.reduce((a, b) => a + b, 0)
}

👉 main.js

javascript 复制代码
// 主文件(入口文件)
import count from "./js/count";
import sum from "./js/sum";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

2.1.3 下载依赖

打开终端,来到项目根目录【webpack_code】,运行以下指令:

👉 初始化package.json文件

javascript 复制代码
npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack,否则下一步会出错。

👉 下载依赖

javascript 复制代码
yarn add webpack webpack-cli -D

2.1.4 启用 Webpack

👉 开发模式

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

👉 生产模式

javascript 复制代码
npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js:指定 Webpack 从 main.js 文件开始打包,不但会打包 main.js,还会将其依赖也一起打包进来。

--mode=xxx:指定模式(环境)。

2.1.5 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下,查看 dist 目录下文件情况即可。

Webpack 本身功能比较少,只能处理 js资源,一旦遇到 css等其他资源就会报错。

所以学习Webpack,就是主要学习如何处理其他资源。

三、基本配置

3.1 5大核心概念

👉 1. entry(入口):指示Webpack从哪个文件开始打包。

👉 2. output(输出):指示Webpack打包完的文件输出到那里去,如何命名等 。

👉 3.loader(加载器):Webpack本身只能处理js、json等资源,其他资源需要借助loader,Webpack才能解析。

👉 4.plugins(插件):扩展Webpack的功能。

👉 5. mode(模式):主要有两种模式

  • 开发模式:development

  • 生产模式:production

3.2 准备Webpack配置文件

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

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

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

3.3 修改配置文件

  1. 配置文件
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",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};
  1. 运行指令
javascript 复制代码
npx webpack

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

相关推荐
make几秒前
AI 流式请求工具函数 (通义千问)
前端·javascript
作曲家种太阳3 分钟前
加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】
前端
前端太佬8 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术16 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
Herbig21 分钟前
服务器上安装node
linux·node.js
前端大白话32 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys34 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话36 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
cg50171 小时前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬1 小时前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构