webpack打包实例详解_webpack打包案例-CSDN博客

本文链接：https://blog.csdn.net/CH_whale/article/details/123458315

这篇博客介绍了webpack的基础知识和使用步骤。首先创建一个简单的项目，包含多个JS文件直接在HTML中引用。然后通过npm初始化项目，安装webpack和webpack-cli。接着将JS文件改写为模块导入导出方式，最后使用webpack命令打包，生成的dist文件夹包含打包后的main.js。在HTML中引入这个打包文件即可完成webpack的初步使用。

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

参考博客：webpack的功能介绍以及如何使用webpack_银鞍照白马的博客-CSDN博客_webpack怎么用

webpack官方文档：概念 | webpack 中文网 (webpackjs.com)

1. 新建一个webpack-demo文件

文件目录如下：

各文件内容如下：

index.html

<!DOCTYPE html>
<html lang="en">

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

<body>
    <h3>hello</h3>
    <div id="root"></div>
    <script src="./index.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/menu.js"></script>
    <script src="./js/common.js"></script>
</body>

</html>

index.js

var dom = document.getElementById('root')

header.js

menu.js、common.js和header.js形式一样

var header = document.createElement('div')
header.innerText = 'header'
dom.append(header)

完成以上步骤后，打开index.html，页面展示如下图所示：

2. 使用webpack打包

打开终端初始化项目：

npm init

输入命令行后一路回车就行，会生成一个package.json

安装webpack-cli、webpack

npm install webpack-cli --save-dev    //--save-dev表示开发时候依赖的东西
npm install webpack --save    //--save是开发之后还依赖的东西

修改index.js文件

import Header from './js/header'
import Common from './js/common'
import Menu from './js/menu'

new Header()
new Common()
new Menu()

修改header.js，common.js、menu.js同理

function Header (){
    var dom = document.getElementById('root')
    var header = document.createElement('div')
    header.innerText = 'header'
    dom.append(header)
}
export default Header

执行命令行，打包JS