首页 > Web开发 > 详细

webpack

时间:2019-06-26 00:34:31      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:服务器   适用于   基于   很慢   相关   ini   导包   静态资源   ase   

<!--

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

webpack

标签:服务器   适用于   基于   很慢   相关   ini   导包   静态资源   ase   

原文:https://www.cnblogs.com/IwishIcould/p/11087488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号