vue实战--webpack基本使用

最新推荐文章于 2025-07-11 16:02:57 发布

晨曦之光11

最新推荐文章于 2025-07-11 16:02:57 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_21796899/article/details/78762757

本文详细介绍了如何安装和使用Webpack，包括全局和项目局部安装，使用实例，以及Webpack配置文件的创建。此外，还讲解了Webpack-dev-server的安装、配置，如设置contentBase、自动打开浏览器、指定端口号和实现热更新。最后，提到了html-webpack-plugin插件的作用和安装，用于自动生成并引入bundle.js和css文件。

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

安装webpack

全局安装：npm i -g webpack
- 目的：在任何目录中通过CLI使用 webpack 这个命令
项目安装：npm i -D webpack
- 目的：执行当前项目的构建
安装失败：目录下存在一个以前的jQuery包

安装成功

这里写图片描述

使用实例

思路

1 使用npm init -y 初始package.json，使用npm来管理项目中的包
2 新建项目目录结构及index.html和main.js，实现隔行变色功能

main.js文件
// 通过 ES6 的 import 关键字，来导入jquery包文件
// 1 通过npm下载jquery：npm i -S jquery
// 2 下载好的包，就会被放到 node_modules 文件夹中
// 3 通过 import 导入包，将来就会自动从 node_modules 文件夹中找到这个包，并且导入
import $ from 'jquery'

//