webpack

Posted 2022-02-12 iwishicould

<!--

.sass后缀的文件名 比较老了 现在它的后缀名是.scss 其实他们是同一个东西 只是 后缀名发生了变化

以 .sass写的文件的内容是 他没有括号 没有分号 有点怪 它跟新为了.scss 就有了花括号 和 逗号了

body

color:red

font-size:12px

 

字体文件有 .svg .ttf .eot .woff .woff2 这些都是字体文件的后缀名

网页中 引入了太多的静态资源 会有这样的问题

1==》网页的加载速度变慢 因为会有很多的二次请求

它首页拿到网页中的 html标签 当他发现有srcipt或者src标签 等 标签 它就回去服务器去拿 如果静态资源多了 服务器就会变得很慢 一个网页要渲染出来 所以不止发送一次请求

2==》有处理错综复杂的依赖关系 如 bootstrap和jq之间的依赖关系

如何解决上述之间的问题：

1合并 压缩 精灵图 图片的Base64编码（它适用于小的图片） 图片的Base64编码的做法比精灵图更加的好，因它要发送0次青丘 而精灵图至少要发送一次青丘

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

什么是webpack

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

所以要使用webpack 首先要安装node.js

如何完美的而解决上述的两个问题

1使用Gulp 2webpack

 

1使用Gulp它是基于task任务的

2webpack 它是基于整个项目惊醒构建的 可以完美的实现资源的合并 打包 压缩 依赖

-->

 

<!--

安装webPack的两种方式

第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了

在项目根录中运行 npm i webpack --save-dev 安装到项目依赖中去

ps=》dist 目录 代表的是产品级的目录 直接给用户

语法 ul>li*10这是第$li 这是一种快的语法

-->

 

<!--

做一个各行变色的功能有4步骤

安装包描述文件 npm init -y 新版本的node会自带这个的

npm i jquery -S 安装jq 保存到依赖列表中去了 在E:\vuekaifa\lib\05day-webpack-隔行变色>这个目录中去

05day-webpack-隔行变色目录下==》新建src目录 在src目录下 新建index.html文件 在src目录下新建mian.js文件

src目录下创建 imgs文件夹 和js文件夹

05day-webpack-隔行变色目录下==>创建dist目录

在mian.js文件中导入jq 导入的语法是 import ** from **它是es6中导入模块的方式

1 如 import $ from ‘jquery‘ 注意大小写

从引入文件可以知道 首先是在自己的兄弟目录中去找 然后去父级目录的兄弟目录中去找 然后依次类推

下载cnpm i jquery -S

 

 

// 实现隔行变色的功能

$(function()

$("li:odd").css("background","red")

)

在node.js中 你要是这样写的 const $=require("Jquery")

 

由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from ‘Jquery‘汇报错

所以需要webpack来惊醒转化

2在src下创建webpack.config.js文件配置如下

module.exports=

entry:path.join(__dirname,‘./mian.js‘), //入口文件 使用webpack要打包哪一个文件

output: //输出相关的配置

path:path.join(_dirname,‘./dist‘), //指定打包好的文件会输出到哪一个目录（dist)下去

// filename:"bundle.js" //指定打包好的文件的名称叫什么名字

3所以在index中的时候我们就引入被webpack编译好的js文件就可以了

<script src="../dist/testindex.js"></script>

4转化的语法是 webpack ./被编译的文件路径 ./新文件的路径 这是webpack运行的命令

webpack ./src/mian.js ./dist/testindex.js 在dist中被编译的文件是为testindex.js

 

webpack 能够处理的问题

webpack能够处理js文件之间的互相依赖关系

webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法

 

E:\vuekaifa\lib\05day-webpack-隔行变色> webpack ./src/main.js ./dist/yasuomain.js

Hash: 4cc4695e15064bd19a6f

Version: webpack 3.8.1

Time: 344ms

Asset Size Chunks Chunk Names

yasuomain.js 284 kB 0 [emitted] [big] main

[0] ./src/main.js 87 bytes 0 [built]

+ 1 hidden module

-->

 

<!--

如何实现时时跟新我写的代码 此时就需要有一个配置文件了 webpack.config.js这个文件 这个文件是在跟目录下哦

webpack是基于node去构建的 所以你的依法和node还是很相似的哦

在配置文件中需要手动的指定配置文件的入口和出口

-->

<!--

wabpack.config.js文件最基本的配置哦 文件在跟目录下哦

 

// 因为要对路径操作 所以你要引入path这个模块哦 对他进行操作哦

const path=require("path"); //路径模块

// 配置文件 暴露出去哦 // 手动的指定入口和出口

module.exports=

entry:path.join(__dirname,‘被打包的文件.js‘), //入口文件 使用webpack要打包哪一个文件

output: //输出相关的配置

path:path.join(__dirname,‘./dist‘), //指定打包好的文件会输出到哪一个目录（dist)下去

filename:"bundle.js" //指定打包好的文件的名称叫什么名字

当你配置好了之后 直接在 E:\vuekaifa\lib\05day-webpack-隔行变色>webpack 输入webpack就行了 它就会自动帮你打包

此时还不行 你还需要写后面的代码 看12章

-->

 

<!-- 如何添加npm run dev 启动程序

下载npm i webpack-dev-server -S 在pack.json中添加 "dev": "webpack-dev-server"这一句 注意使用逗号隔开

"scripts":

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack-dev-server" //添加这一句

,

本节实现的功能==》手动修改成自己想要的端口号 2并且自动打开浏览器哦

下载 npm i webpack-dev-server -S

在package.json中修改

将“script”: "dev":"webpack-dev-server --open --port 3000"

解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000

-->

<!-- 本节实现的功能==》

我们发现启动之后展示的不是一个具体的首页 而是一个目录 如何解决启动之后是一个具体的首页

将“script”: "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot" 这里有4个指令

 

解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000 --contentBase src 以src为根目录 展示它里面的index.html这个文件

--hot实现局部的跟新 你修改了哪里就跟新哪里 效率跟高了 它能够实现网页不重载(那个圈圈不会刷新) 就可以实现页面跟新

-->