在网页中会引用那些常见的静态资源？

• js
  • .js .jsx .coffee .ts(Typescript 类 C#语言)
• css
  • .css .less .sass .scss
• images
  • .jpg .png .fig .bmp .svg
• 媒体
  • .mp3 .mp4 .ogg .avi .wmv
• 字体文件
  • .ttf .eot .woff .woff2 .svg
• 模板文件
  • .ejs .jade .vue[这是我们在webpack中定义组件的方式，强烈推荐]

网页中引入的静态资源过多会有什么问题？

1. 网页加载速度会变的很慢，因为要发起很多的二次请求

2. 要处理复杂的依赖关系

如何解决上述所产生的问题？

1. 合并,压缩，精灵图，图片的base64编码

2. 可以使用webpack解决各个包之间的复杂的依赖关系

什么是webpack?

webpack是前端一个项目构建工具，它是基于node.js开发出来的一个前端工具

构建工具有哪些？

1. Gulp,是基于task任务的

2. Webpack，基于整个项目进行构建的

   • 使用webpack这个前端自动化构建工具，可以完美的实现资源的合并，打包，压缩，混淆等等很多功能
   • webpack官网

开始使用webpack打包构建

1. 在项目目录（不要带中文，会报错）运行 npm init -y 初始化项目
2. 创建项目基本目录结构
3. 运行npm i jquery --save 安装jquery类库
4. 
5. 因为浏览器不识别es6语法，import $ from 'jquery'所以我们使用webpack进行语法转换，输入命令 webpack src/main.js --output dist/bundle.js

webpack安装

在项目的根目录运行 npm i webpack webpack-cli -D 安装webpack和webpack-cli 到项目依赖中

使用webpack配置文件简化打包命令

1. 在项目根目录创建一个webpack.config.js
2. webpack需要指定入口文件和输出文件的文件路径,所以我们需要在webpack.config.js中配置这两个路径
   

webpack实现实时打包构建

1. 因为每次修改代码，都需要手动运行打包命令，十分不便捷，所以我们可以使用webpack-dev-server来实现实时打包编译，当修改代码的时候，就可以自动打包

2. 运行npm i webpack-dev-server --save-dev安装到开发依赖

3. 安装完成以后，在package.js文件中的scripts节点下添加一个"dev":"webpack-dev-server

4. 运行 npm run dev就可以得到一个自动打包的环境

5. webpack-dev-server会在根目录的内存中给我们生成一个bundle.js，然后index.html页面引入的文件，就应该变成 /bundle.js

6. 在package.json配置文件中加入 "dev":"webpack-dev-server --contentBase src --port 3000 --open可以直接打开网站，并且指定端口号

7. 通过webpack.config.js修改webpack-dev-server选项，如下所示:↓

    devServer:{//配置dev-server命令参数的第二种形式 // --contentBase src --port 3000 --openport:2333,//设置端口号contentBase:'src',//指定打开的目录open:true //自动打开浏览器}
   

使用html-webpack-plugin插件配置启动页面

1. 运行npm i html-webpack-plugin --save-dev安装到开发依赖

2. 修改webpack.config.js配置文件：详情看配置文件

3. html-webpack-plugin插件会自动把bundle.js引入到页面中去,然后我们就可以把index.html页面中的引入标签删除掉了

使用webpack打包css文件

1. 运行npm i style-loader css-loader --save-dev
2. 修改webpack.config.js配置文件,在module节点中加入配置项，详情请看配置文件

3.注意：use表示使用那些模块处理test所匹配到的文件，use 中loader调用顺序是从后往前调用

使用webpack打包scss文件

1.运行npm i sass-loader node-sass --save-dev
2.配置use使用 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

加载图片或者文件或者字体

1. 运行 npm i url-loader file-loader -D,file-loader是不需要配置,但是url-loader依赖于file-loader所以必须下载
2. 配置webpack.cocnfig.js，在moudle加上这行代码: {test:/\.(jpg|png|gif)$/,use:'url-loader'}
3. 如果想取消base64编码，可以在use配置项后面加上参数:url-loader?limit=100&name=[hash:8]-[name].[ext]
   1. 其中limit这个参数：值就是图片的大小，单位是byte,如果引入的图片大于或者等于limit值，则不会被转换成base64编码格式， name=[hash:8]这个参数，其中hash:8 的值就是hash加密后所取得截取值。 [name]代表图片原来的名称,[ext]代表图片原来的后缀
   2. 这里的hash加密是根据图片本身加密的，并不是根据图片名称加密

完整的webpack.config.js配置

使用vue-cli脚手架

PS:如果不想用webpack的可以用另一个打包工具，vue-cli脚手架

1. 运行npm install -g @vue/cli安装vue-cli
2. 运行vue create vueproject 创建属于自己的项目
3. 创建完成找到项目目录,运行npm run serve启动服务，就可以开始搞事情了

webpack打包配置相关推荐

1. vue-cli+webpack打包配置

   vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

2. 前端webpack打包配置

   最近在学习webpack打包,顺便做了一下笔记用来总结.后续继续补充 对项目进行初始化生成package.json文件 npm init -y 通过npm或cnpm下载webpack打包工具以及ts- ...

3. webpack 打包配置

   代码示例 webpack.config.js // 引入 path 为了使用 join 方法 const path = require('path')// webpack 插件 // clean-we ...

4. vue.config.js配置，webpack打包配置详解

   注意: vue-cli3 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动创建 第一步:手动创建vue.config.js文件, 一般放在和package.json同级目录 ...

5. vue项目webpack打包配置

   基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录 基于vue/cli3.0+脚手架搭建Vue项目(12) 前言 一.webpack配置 1.配置vue.config.js 2.配置Dl ...

6. webpack基本打包配置流程

   项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.ht ...

7. 建立项目的webpack简单配置

   实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...

8. webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25

   一.作用:htmlWebpackPlugin插件会在webpack打包结束后,自动帮我们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中: 二.安装 :npm install ht ...

9. 自定义配置webpack打包文件

   基础使用 安装 npm install webpack -g 模块化程序(配置过程忽略此步骤) cale.js function add(a,b){return a + b; } module.exp ...

最新文章

1. 如何理解社交效应「蒸发式降温」？
2. 轻量又高效，Apache Shiro 你值得拥有！
3. VS2008打包（含水晶报表）与安装注意事项
4. 20140617 数组和链表的区别
5. python中的列表排序
6. 运行第一个PHP程序
7. Python 数据结构与算法 —— 哈弗曼树
8. 约瑟夫环数学公式求解
9. Android Studio查看aar文件内容
10. 2021-09-08因子分解机
11. Hadoop大数据组件简介
12. pubwinol免刷_Pubwin万象OL实名一键自动处理程序
13. 计算机上键盘无法输入法,为什么键盘打不出字 大家都会用鼠标点击输入法图...
14. java中的IO流(超全)(超详解)结合实例轻松掌握
15. 学生信息管理系统-教师端
16. 【正本清源】关于extern、static、const的正确使用方法
17. input 输入框 监听@input
18. 1.2.2 musl pwn
19. 如何推送PLC报警消息至微信
20. 【个人纪录 | 分割】

热门文章

1. 网站挂 Google 广告能赚多少钱？
2. 7-11 奥运排行榜（简洁AC+效率高）
3. spring boot 爬取艺龙所有评论数据
4. 小型断路器的C型和D型在选型上的区别
5. 数据挖掘 知识发现过程与应用结构
6. Python-音频补齐（即对不同长度的音频用数据零对齐补位）
7. 银行数据仓库体系实践（16）--数据应用之财务分析
8. delphi xe3 mysql,Mysql ZeosLib Delphi XE3
9. 机器学习——最小二乘法，闭式解矩阵推导
10. 5G通信系统基站参数指标