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>
相关推荐
光影少年2 天前
webpack打包优化
webpack·掘金·金石计划·前端工程化
百思可瑞教育4 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪1004 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1004 天前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登4 天前
【Webpack】模块联邦
前端·webpack·node.js
Yvonne爱编码7 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
会有钱的-_-7 天前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
xiaopengbc7 天前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
ningmengjing_8 天前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20008 天前
Webpack开发:从入门到精通
前端·webpack·node.js