使用webpack+webpack-dev-server打包开发页面-初体验

最新推荐文章于 2024-04-22 09:35:58 发布

笑笑的微笑

最新推荐文章于 2024-04-22 09:35:58 发布

阅读量206

点赞数

分类专栏：前端文章标签： webpack js 前端

本文链接：https://blog.csdn.net/pz3305636904/article/details/112167911

版权

这篇博客介绍了如何使用webpack和webpack-dev-server进行前端页面的开发打包。从初始化项目开始，逐步讲解了安装webpack依赖、配置文件编写、入口文件和出口文件设置，以及如何启动开发环境和查看打包结果。通过这个过程，读者可以了解webpack的基本用法。

摘要由CSDN通过智能技术生成

使用webpack+webpack-dev-server打包开发页面

总所周知，webpack是打包工具，不论是html、css、js还是图片，都给你打包压缩，减少流量消耗和资源消耗。那么，来看看webpack怎么用。

学东西，第一、要看官网、看官网、看官网重要的事情说三遍
webpack官网地址
 学习博客
 注意版本匹配
如果像笔者一样理解能力不是特别突出的，可以找些相关视频学习、辅助以官方文档。

初始化项目

- 新建一个文件夹，如:webpack-demo
-  cd到webpack-demo目录下，npm init -y。生成了一个配置包依赖文件``package.``，如图：![package.json](https://img-blog.csdnimg.cn/20210104091635836.png#pic_center)

package.json其中配置如图:

 "name": "webpack-demo", //项目的名称（也是文件夹名称）
 "version": "1.0.0",//项目的版本，初始化为1.0.0
 "description": "",
 "main": "index.js", //项目的默认启动读取文件，以后可以变化
 "scripts": { //启动命令配置
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [], //关键字
 "author": "", //作者名称
 "licens