webpack【初体验】使用 webpack 打包一个程序

打包前

共 3 个文件

dist\index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack 示例</title>
</head>

<body>
    <h1>Webpack 示例</h1>
    <!-- 引入打包后的 JavaScript 文件 -->
    <script src="bundle.js"></script>
</body>

</html>

src\hello.js

cpp 复制代码
export function hello() {
  alert("你好");
}

src\index.js

cpp 复制代码
import { hello } from "./hello";
hello();

使用 Webpack 打包

新建文件 package.json

json 复制代码
{
  "name": "webpack_demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  }
}

新建文件 webpack.config.js

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

module.exports = {
  // 入口文件
  entry: "./src/index.js",
  // 输出配置
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

安装依赖

cpp 复制代码
pnpm i

开始打包


打包后

将 hello.js 和 index.js 合并成了一个文件 dist\bundle.js

cpp 复制代码
(()=>{"use strict";alert("你好")})();

最终效果为

浏览器访问 dist\index.html 可见程序正常运行,表示打包成功!

总结 Webpack 的打包过程

  1. Webpack 通过 webpack.config.js 中的 entry 配置,找到打包的入口文件 src/index.js

  2. 沿着入口文件 src/index.js,找到导入的关联文件 src\hello.js

  3. 根据 webpack.config.js 中的 output 配置,Webpack 会将所有找到的文件 ( hello.js 和 index.js )打包成一个名为 bundle.js 的文件,并输出到 dist 文件夹中

  4. dist\index.html 则直接加载的打包后的 bundle.js 文件,实现预期效果

    html 复制代码
        <!-- 引入打包后的 JavaScript 文件 -->
        <script src="bundle.js"></script>
相关推荐
Hashan2 小时前
深入理解:Webpack编译原理
前端·webpack
一枚前端小能手8 小时前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack
Hashan11 小时前
你知道Webpack解决的问题是什么嘛?
前端·webpack
vipbic1 天前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack
妮妮喔妮1 天前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J1 天前
webpack笔记
前端·笔记·webpack
webYin2 天前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
!执行2 天前
webpack 相关配置
webpack
醉方休2 天前
vite与webpack对比
前端·webpack·devops
wallflower20202 天前
🚀 从 Webpack 到 Vite:企业级前端构建、代码分割与懒加载优化完全指南
webpack·vite