webpack 使用保姆级 html css js 打包处理

最新推荐文章于 2025-01-19 08:00:25 发布

阿狸lyinshaofeng

最新推荐文章于 2025-01-19 08:00:25 发布

阅读量917

点赞数

分类专栏：笔记文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/lyinshaofeng/article/details/128009879

版权

本文是webpack的保姆级教程，详细介绍了webpack的基本概念和核心配置，包括入口(entry)、出口(output)、模式(mode)、加载器(loader)和插件(plugin)。通过实例演示了如何处理CSS、图片和SASS文件，并讲解了如何使用devServer进行本地开发，以及配置HtmlWebpackPlugin生成HTML模板。同时，文章提到了代码分割、优化、环境变量的设置和Vue脚手架的相关知识。

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

概念
   webpack是一个前端打包工具
   用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
   Vue 前期脚手架就是用webpack制作
（Vue 开始推荐vite构建工具（更快））
react脚手架
angular等现代框架脚手架都是依赖webpack

webpack核心概念
   入口
entry
       项目运行的起点
       告诉webpack从哪开始打包
   出口
output
       打包好放入哪
       filename 文件名
       path 路径
   模式
mode
       产品模式
production
       开发模式
development
   loader
加载器
       webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力
   插件
plugin
       webpack运行生命周期过程中做一些其他任务
（压缩，清理）

webpack配置
默认webpack.config.js 配置文件中

devServer
   安装：npm i webpack-dev-server -D
   作用：开启一个本地服务器
   open:true
       是否自动打开浏览器
   host：“localhost”
       域名
   port:8080
       端口号
   hot:true
       更新（文件保存，网页自动更新）
   package.json
       script：{“serve”:"webpack serve"}
       npm run serve 运行项目

loader
加载器
   css处理
       安装：npm i css-loader style-loader -D
       作用：css-loader处理.css文件 style-loader把css加载到style标签内
       module:{