webpack1-打包流程

最新推荐文章于 2025-09-17 21:24:49 发布

原创最新推荐文章于 2025-09-17 21:24:49 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm

webpack 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了webpack1的打包流程，从初始化项目到设置package.json，再到安装webpack及webpack-cli。接着讲解如何通过npm命令安装jQuery，并编写js文件。最后展示了如何使用webpack打包js文件并生成bundle.js，以及在HTML中引用该文件实现页面效果。

webpack1-打包流程

初始化
命令：npm init -y
生成的文件：package.json
在package.json中的scripts中添加
“dev”: “webpack --mode development”
“build”: “webpack --mode production”
安装webpack
2.1 安装全局webpack，安装过全局的webpack则跳过此步骤
命令：npm i webpack -g
2.2 安装项目webpack
命令：npm i webpack -s -d
生成的文件夹：node_modules
生成的文件：package-lock.json

2.3 安装项目webpack-cli
命令：npm i webpack-cli
拉取jquery
命令：npm i jquery -S
生成文件夹：node_modules/jquery
编写xxx.js
打包xxx.js
命令：webpack 文件目录/xxx.js -o ./dist/xxx-bundle.js --mode development
例：webpack ./src/js/myDemo.js -o ./dist/myDemo-bundle.js --mode development
在html中引用xxx-bundle.js
页面效果