Vue.js入门(五)

目录

第一章 nrm的使用

1.1 两个cnpm的区别

第二章 什么是webpack

2.1 为什么需要webpack

2.2 webpack简介

第三章 webpack的基本使用

        3.1 webpack的安装

        3.2 webpack小项目示范

                  3.2.1 webpack小项目的结构

        3.3 构建项目

                  3.3.1 main.js

3.3.2 主页

3.3.3 项目小结

第四章 webpack的最基本的配置文件的使用

第五章 webpack-dev-server的使用

5.1 基本使用

5.2 web-pack-server参数的配置

5.2.1 自动打开浏览器并修改端口号

5.2.2 以src作为跟目录

5.2.3 热重载

5.3 webpack-dev-server配置命令的第二种方式

5.4 html-webpack-plugin的两个基本作用

第六章 loader

6.1 配置处理CSS样式表的第三方loader

6.2 分析webpack调用第三方loader的过程

6.3 处理less文件的loader

6.4 配置处理scss文件的loader

---

第一章 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.youkuaiyun.com/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