文章目录
- Webpack解决了哪些问题
- 在网页中会引用哪些常见的静态资源？
- 网页中引入的静态资源多了以后有什么问题？
- 如何解决上述两个问题
- 什么是webpack
- 如何完美实现上述的2种解决方案
- webpack安装的两种方式
- 初步使用webpack打包构建列表隔行变色案例
- 使用webpack的配置文件简化打包时候的命令
- 实现webpack的实时打包构建
- 使用`html-webpack-plugin`插件配置启动页面
- 实现自动打开浏览器、热更新和配置浏览器的默认端口号
- 方式1
- 方式2
- 使用webpack打包css文件
- 使用webpack打包less文件
- 使用webpack打包sass文件
- 使用webpack处理css中的路径
- 使用babel处理高级JS语法
- 相关文章
Webpack解决了哪些问题
在网页中会引用哪些常见的静态资源？
- JS (.js .jsx .coffee .ts（TypeScript 类 C# 语言）)
- CSS (.css .less .sass .scss)
- Images (.jpg .png .gif .bmp .svg)
- 字体文件（Fonts）(.svg .ttf .eot .woff .woff2)
- 模板文件(.ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】)
网页中引入的静态资源多了以后有什么问题？
- 网页加载速度慢， 因为 我们要发起很多的二次请求；
- 要处理错综复杂的依赖关系
如何解决上述两个问题
- 合并、压缩、精灵图、图片的Base64编码
- 可以使用webpack可以解决各个包之间的复杂依赖关系；
什么是webpack
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
如何完美实现上述的2种解决方案
- 使用Gulp， 是基于 task 任务的；
- 使用Webpack， 是基于整个项目进行构建的；
- 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
- 根据官网的图片介绍webpack打包的过程
- webpack官网
webpack安装的两种方式
- 运行
npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 - 在项目根目录中运行
npm i webpack --save-dev安装到项目依赖中
