webpack 学习笔记-1 demo

最新推荐文章于 2025-05-23 18:17:46 发布

原创最新推荐文章于 2025-05-23 18:17:46 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文是关于Webpack的学习笔记，介绍了Webpack的基本概念、安装步骤、项目准备、配置文件的编写以及配置命令的设定，通过实际操作展示了如何使用Webpack打包JavaScript模块并生成可供浏览器使用的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webpack，是什么？

借用官方说法：

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

简而言之，webpack 是一个模块打包器 (module bundler)，能够将任何资源如 JavaScript 文件、CSS 文件、图片等打包成一个或少数文件。

学习webpack，直接观看代码理解。将自己的理解过程记录下来，后续若有不同理解，再来修改。

安装

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

Webpack可以使用npm安装，新建一个空的文件夹（此处命名为webpack_sample），在终端中转到该文件夹后执行下述指令就可以完成安装。

在上述文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件。

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包。

// 安装Webpack
npm install --save-dev webpack

--save-dev 与 --save 命令在《devDependencies 与 dependencies 的区别》一文中已介绍，这里不再赘述。

回到之前的文件夹，并在里面创建两个文件夹，src文件夹和public文件夹，src文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:
index.html –放在public文件夹中;
greeter.js – 放在src文件夹中;
main.js – 放在src文件夹中;

此时的目录如下：

各个文件代码如下：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack_sample</title>
</head>
<body>
    <div id='root'></div>
    <script src="bundle.js"></script>
</body>
</html>

main.js

const greeter = require('./greeter.js');
document.querySelector("#root").appendChild(greeter());

greeter.js

module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
};

配置webpack

在项目根目录创建名为webpack.config.js的文件，代码如下：

'use strict'
const webpack = require('webpack')
const path =require('path')
module.exports = {
    entry: __dirname + "/src/main.js",//唯一的入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方，__dirname是node.js终端一个全局变量，它指向当前执行脚本所在的目录
        filename: "bundle.js"//打包后输出文件的文件名
    }
}