一篇文章解决Webpack

一:什么是webpack

webpack是一个用于现代JavaScript应用程序的静态模块打包工具。本质是一个软件包,

静态模块包括以下:html、css、js、图片等固定内容的文件

二:webpack工作原理

当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

所谓依赖图:当一个文件依赖另一个文件时,webpack都将文件视为直接存在依赖关系。

三:webpack使用流程

  1. 新建并初始化项目,编写业务源代码
  2. 下载webpack webpack-cli到当前项目中(本地软件包),并配置局部自定义命令(webpack源码会自动下载到node_modules中)
  3. 运行打包命令,自动产生dist分发文件夹(压缩和优化后,用于最终运行的代码)

四:打包入口起点(打包文件的主入口)

1单个入口语法

javascript 复制代码
module.exports={
	entry:{
		main:'输出路径'
	}
}
//简写形式如下:
module.exports={
	entry:'输出路径'
}

2 对象语法

五:打包出口(写入编译软件)

通过output选项,告知webpack如何向硬盘中写入编译文件。

注意,即使可以存在多个entry起点,但只能指定一个output配置。

1 用法

在output选项中,配置filename属性。用于规定输出的文件名配置

javascript 复制代码
module.exports={
	output:{
		filename:'bundle.js(输出规定的文件名)'
	}
}

2 多个入口起点

六:利用Webpack处理css代码

1 打包CSS代码

  1. 将css引入js入口文件(默认src/login/index.js)中
  2. 下载css.loader(解析css代码)和style.loader(把解析后的css代码插入到DOM中)本地软件包
  3. 配置webpack.config.js让Webpack拥有该加载器功能
  4. 打包后观察结果

2 提取CSS代码

1 为什么要提取css代码为一个独立文件

浏览器可以缓存css文件,同时下载css与js文件,提高网页运行效率

2 如何使用mini-css-extract-plugin插件

  1. 下载mini-css-extract-plugin本地软件包
  2. 配置webpack.config.js让Webpack拥有插件功能
  3. 打包后观察结果

七:搭建开发环境

配置webpack-dev-server快速开发应用程序

作用:启动web服务,自动检测代码变化,热更新到网页

注意:dist目录和打包内容是在内存里

相关推荐
薛定谔的算法18 小时前
Vue.js 条件渲染与列表渲染详解:原理、用法与最佳实践
前端·vue.js·前端框架
_前端小李_18 小时前
关于预检请求
前端
复苏季风18 小时前
Vue3 小白的疑惑:为什么用 const 定义的变量还能改?
前端·javascript·vue.js
Mintopia18 小时前
在 Next.js 中接入 Google Analytics 与 PostHog —— 一场“数据偷窥”的艺术演出
前端·javascript·next.js
遂心_18 小时前
React useState:20分钟彻底掌握这个让你"状态满满"的Hook
前端·javascript·react.js
月亮慢慢圆18 小时前
Web Animation API
前端
Mintopia18 小时前
AIGC驱动的Web界面设计:技术逻辑与用户体验平衡
前端·javascript·aigc
盏茶作酒2918 小时前
浅拷贝和深拷贝
前端·javascript
在掘金8011018 小时前
pm2 程序 windows开机启动管理设置
前端
徐_三岁18 小时前
深入理解 svh、lvh、dvh—— 移动端视口高度解决方案
前端·css