目录
5.3 webpack-dev-server配置命令的第二种方式
5.4 html-webpack-plugin的两个基本作用
第一章 nrm的使用
1.1 两个cnpm的区别
nrm中存储的cnpm仅仅是一个地址
通过npm i cnpm -g 这样安装cnpm是一个装包工具
第二章 什么是webpack
2.1 为什么需要webpack
一般浏览器根据地址向服务器拿到的资源只是个html页面,然后浏览器要从上到下解析每一个html标签,当解析到一个srcipt标签,发现一个src属性,会发送一个二次请求,当发现一个样式标签,又会发送二次请求.知道结束.
在网页中点击一个菜单,需要导入bootstrap包,bootstrap包又依赖于我们的jquery包.网页上有很多复杂依赖关系.
2.2 webpack简介
可以看到webpack的官方网站的图片
可以将项目进行打包(bundle),左侧是未打包之前的项目结构,js依赖于.hbs,.hbs又依赖于另一个js,关系很复杂,同时琐碎的资源很多,经过webpack的处理后,依赖关系基本没了,同时琐碎的资源也少了很多.
第三章 webpack的基本使用
3.1 webpack的安装
一条命令就可以了,我这里因为装了cnpm工具,所以用的是cnpm安装的
3.2 webpack小项目示范
3.2.1 webpack小项目的结构
src存放源代码
main.js是项目的入口文件
index.html是项目的主页
dist是项目的发布目录
3.3 构建项目
首先对项目进行初始化,项目初始化后会在项目底下生成一个package.json
我们的项目要用到jquery,我们进行安装.关于-S 是什么可以详见https://www.jianshu.com/p/2e7f3b69e51e
安装完后,项目底下会出现node_modules,最后项目的结构如下图
3.3.1 main.js
我们的隔行变色需要jquery,但是为了少进行二次读取,我们把项目需要导入的包都写进main.js中,这样项目只用导入一次就可以了
在main.js中导入jquery并让$接收
隔行变色代码
但是由于是ES6代码,浏览器可能因识别不了而报错.使用node语法,运行
来导入浏览器也不能识别.
面对这种情况,我们可以用webpack对js做一层处理,并输出到dist文件夹下.在这之前我们先要装一下webpack-cli
装完webpack-cli后,找到package.json,在scripts下加入dev和build两个命令
"dev": "webpack --mode deveplopment",
"build": "webpack --mode production"
效果如下:
然后在src下新建index.js文件,这个会被自动打包成main.js放到dist中,可以运行npm run dev或者npm run build.如果遇到错误可以参考https://blog.csdn.net/lplife/article/details/80650993,或者参见下图
npm run dev是开发环境,会把要打包的文件按原来的形式输出,而不是压缩输出,npm run build会把要打包的文件压缩输出.
最后输入webpack .\src\main.js -o .\dist\bundle.js命令进行打包,黄字代表还有点问题,接下来会进行配置,大家理解意思就好....
3.3.2 主页
在主页中,我们将刚才打包的bundle.js导入
打开看效果
3.3.3 项目小结
我们正常的js中是不能引入别的js文件的,但是webpack这个帮我们引入了,所以它能做到下面的第一条.
第四章 webpack的最基本的配置文件的使用
我们在上面打包了main.js文件,如果我们修改了main.js的话就要重新打包有点麻烦,我们想直接输入webpack进行打包,所以我们要进行如下配置.
1.在webpack底下建立webpack.config.js文件
2.填写如下内容
因为4.0版本的新特性,要指定模式,所以我们需要在exports下,新添加
.
输入webpack,打包成功
第五章 webpack-dev-server的使用
5.1 基本使用
在第四章中我们发现,我们每次更改完还是要用webpack再打包一次,还是有点麻烦,所以我们希望修改完能直接编译运行.
我们这里需要用webpack-dev-server工具,以下四点需要注意.
对于第三点,我们可以再package.json中的scripts中的dev中配置一下,类似下图,这样我们每次运行npm run dev就会运行webpack-dev-server命令,然后我们就可以在本地运行了.
对于第四点,即使我们已经配置了全局的webpack,我们也需要在本地安装一个webpack,所以我又在本地安装了webpack.
做完后就可以npm run dev来直接运行了,运行后我每次修改项目都会自动编译.
编译完成后我们访问我们的页面发现并没有进行修改,原因是我们在页面中引入的bundle.js的位置不是webpack-dev-server帮我们打包的bundle.js,也就是说下图的目录是不对的
真正打包好的bundle.js应该是在项目的根目录下,即跟dist,src等文件夹平级
但是我们却并没有发现在根目录下有此文件,原因如下图.
所以我们代码应改为
访问地址为:
5.2 web-pack-server参数的配置
5.2.1 自动打开浏览器并修改端口号
5.2.2 以src作为跟目录
5.2.3 热重载
1.不经过刷新直接修改页面
2.不是重新生成所有代码,而是在原有代码的基础上进行修改,下图为生成的修改文件.
5.3 webpack-dev-server配置命令的第二种方式
不在dev中配置,而是另起一个变量,直接上图了...
第二步是引入webpack模块
5.4 html-webpack-plugin的两个基本作用
第六章 loader
6.1 配置处理CSS样式表的第三方loader
我们想在main.js中导入css文件,
6.2 分析webpack调用第三方loader的过程
6.3 处理less文件的loader
6.4 配置处理scss文件的loader
