本次小编呢,为大家带来一篇深入了解打包工具 webpack。

我们今天使用的是 webpack3.8.1版本的,我们学习使用 3.8.1更稳定些,并学习自己如何配置文件,最新版本不需要自己配置文件,但我们需要知道配置文件的原理

最新版本的webpack已经更新到 4.32.2版本了

首先介绍以下什么是 webpack:

  webpack它是一个前端资源加载或打包工具。资源(如:img css js json等)

1.首先第一步就是配置 配置模板说明文件 package.json

2.第二步就是下载webpack

  全局下载:npm install -g webpack@3.8.1

  局部下载:npm install webpack@3.8.1 --save -dev

不加-g 就是局部安装

注意:尽量全局和局部都安装,因为下载之后先找局部安装,局部找不到才去找全局,使用为了方便起见最好都安装,安装好后全局安装在c盘里,局部安装在当前目录下有一个node_modules文件。如果全局安装不用带 --save -dev局部安装需要带。

3.第三步

  1.打包js文件

  指令 webpack 入口文件 出口文件

  可以看到报错,这时候就需要我们去打包了

  

  

  我们每次改变js里的内容都需要打包webpack 入口文件和出口文件非常麻烦,如果我们只想使用 webpack这个指令,就需要提前打包,需要配置 webpack.config.js

  webpack 会有一个默认配置文件叫webpack.config.js

  可以看到我们可以成功打包文件了,如果我们只想输出 webpack 这个指令就可以打包文件,就需要配置文件,现在我们开始配置文件。

Entry:用于指定打包的文件

Output:用于指定打包后的文件

Build/build.js表示将app文件夹中的index.js 打包到build文件夹中的build.js中。

  为什么我仅仅使用 webpack指令就可以打包呢?

  如果不配置webkit输出webkit就会报错:说没有配置文件,找不到。配置文件名必须命名为 webpack.config.js 在这个项目的文件夹下。如果你想使用webpack,webpack就会默认去找一个webpack.config.js的配置文件,通过这个配置文件进行转换

  

  __dirname 是onde的一个全局变量,获取当前文件所在目录完整目录名

可以看到这样就可以使用了

module.exports={//暴露文件
entry:"./index.js",//被打包文件,当前目录
output:{ //打包后文件的出口路径,打包完放在那里
path:__dirname+"/mod2", //路径,把打包后的文件放在mod2目录下面,__dirname当前目录
filename:"bundle.js" //文件名
}, }

  

  2.打包css文件

  

  我们下一汇总就执行css样式就打包变成粉色,如果之间打包会报错,需要下载依赖包。

  loader:依赖包

  css转成js

  less转成js

  json转成js

  img转成js

这种转最后都放在js文件里,就需要依赖包 loader就解决这些问题

  css文件打包到js中 需要css-loader  style-loader

  首先下载css

  npm install style-loader css-loader --save -dev

  

module.exports={//暴露文件
entry:"./index.js",//被打包文件,当前目录
output:{ //打包后文件的出口路径,打包完放在那里
path:__dirname+"/mod2", //路径,把打包后的文件放在mod2目录下面,__dirname当前目录
filename:"./bundle.js" //文件名
},
module:{ //需要依赖的模块(包)
loaders:[ //依赖的包
{
test:/\.css$/,//凡是以css结尾的文件 都使用useloader
loader:"style-loader!css-loader"
//顺序不能写反
}
] }
}

配置完指令后 指令就是简单的 webpack  

  第三步每改一次js文件,就打包一下 webpack

  添加热加载 改完一个文件保存后 打包就会自动刷新

  

Webpack-dev-server是一个轻量级的服务器,修改文件源码后,自动刷新页面将修改同步页面上。

  需要全局安装:

  全局安装:npm install -g webpack-dev-sever@2.9.4

  局部安装:npm install --save-dev webpack-dev-server@2.9.4

  

在css修改颜色保存后就会自动更新了,注意一定在8080端口打开

  直接使用 webpack-dev-server 启动就行

  但是这种启动只是启动服务器,但是不能自动刷新

  另一种启动 webpack-dev-server --hot -inline

  既可以启动服务器也可以让浏览器自动刷新

  配置启动指令 默认启动指令是:webpack-dev-server --hot -inline

  启动一个简单的:直接在package.json里面配置启动项,如vue等框架都是这样启动的。

  这个就是在服务器生成的虚拟文件 bundle.js,这是由出口文件决定的,由你决定。但是和index.html 是同目录同级别

  

  此时没有把这个 bundle.js生成是虚拟的,正常路径应该是以相对路径引入开发时是以虚拟文件开发,开发完后才打包然后以相对来讲引入。

引入关系需要注意

 

作者:晋飞翔

手机号(微信同步):17812718961 欢迎大家一起探索web前端

打包工具webpack和热加载深入学习的更多相关文章

  1. webpack无法热加载(__webpack_hmr 502)

    最近本地开发项目代码一直无法热加载,于是就抽空想办法解决 我们线上的地址是:https://aitest.ichuanyi.com/ai-admin/#/  其实ai-admin是线上的一个目录 所以 ...

  2. vagramt中同步文件,webpack不热加载

    这是一篇参考文章:https://webpack.js.org/guides/development-vagrant/ 在使用vue-cli+webpack构建的项目中,如何使用vagrant文件同步 ...

  3. 关于在Intellij IDEA工具中配置热加载问题

    第一步,创建一个maven项目,然后在pom.xml文件中添加依赖(上图内容). 第二步:来到intellij idea主页面,点击File->Settings->Build->co ...

  4. webpack web-dev-server 热加载

    摘要 坑位: 千万不要webpack.config.js 加了HotModuleReplacementPlugin , web-dev-server 也加hot:true 配置, 会出现莫名的错误, ...

  5. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  6. 如何通过webpack和node来实现多个静态页面html,多个入口,能打包能热加载开发环境调试

    demo已经传到了github,地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack: ...

  7. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  8. webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)

    “热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...

  9. Webpack热加载和React(其中有关于include和exclude的路径问题)

    看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...

随机推荐

  1. 201871010128-杨丽霞《面向对象程序设计(java)》第十六周学习总结

    201871010128-杨丽霞<面向对象程序设计(java)>第十六周学习总结(1分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-dai ...

  2. pointnet++之scannet/train.py

    1.作者可能把scannet数据集分成了训练集和测试集并处理成了.pickle文件. 2.在代码运行过程中,作者从.pickle文件中读出训练集1201个场景的x.y.z坐标和测试集312个场景的x. ...

  3. python3对urllib和urllib2进行了重构

    python3对urllib和urllib2进行了重构,拆分成了urllib.request,urllib.response, urllib.parse, urllib.error等几个子模块,这样的 ...

  4. numpy cookbook

    1.第一章 import numpy as np import matplotlib.pyplot as plt import scipy import PIL import scipy.misc l ...

  5. zr2019暑期高端峰会AB组十测

    郑睿round 1 代码真的好写,还是太笨了,爆零了. 郑睿round_2 好失败,A题真的是日狗了,第一发就可以A的,忘记费用流的反向边也要加一发流量了.哎,我注定是要爆零. 正睿round_3 日 ...

  6. opera11以下添加搜索引擎的办法

    opera11以下:首选项,搜索引擎设置添加搜索引擎,地址是https://www.baidu.com/s?wd=%s 这是从其他浏览器里面得到的. opera11以上: http://www.bai ...

  7. Educational Codeforces Round 70 题解

    噩梦场. 题目出奇的难,好像一群外国老哥看 A 看着看着就哭了-- A 找到 \(b\) 最低的 \(1\),这个 \(1\) 肯定要跟 A 中的一个 \(1\) 搭配,而且是能搭配的 \(1\) 中 ...

  8. Linux性能优化实战学习笔记:第十三讲

    问题1:性能工具版本太低,导致指标不全 解决方案1: 这是使用 CentOS 的同学普遍碰到的问题.在文章中,我的pidstat 输出里有一个 %wait 指标,代表进程等待 CPU 的时间百分比, ...

  9. 第09组 Beta冲刺(1/5)

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 任务分配 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车,页面美化 还剩下哪些任 ...

  10. 【操作系统之十五】iptables黑白名单、自定义链、网络防火墙、常用动作

    1.黑白名单当链的默认策略为ACCEPT时,链中的规则对应的动作应该为DROP或者REJECT,表示只有匹配到规则的报文才会被拒绝,没有被规则匹配到的报文都会被默认接受,这就是"黑名单&qu ...