vue学习(14)：webpack

1.网页中引入的静态资源多了以后有什么问题

(1).网络加载速度慢，因为我们要发起很多的二次请求

(2).要处理错综复杂的依赖关系 

2. webpack最基本的使用方式

main.js是我们项目的JS入口文件

(1).导入jquery

//import***from***是ES6中导入模块的方式

//由于ES6的代码太高级了，浏览器解析不了，所以，这一行执行会报错

import $ from 'jquery'

//使用webpack可以解决，在命令行输出webpack 你要处理的文件相对路径 你要生成的文件的相对路径

例如：webpack ./main.js ./dist/bundle.js

//const $ = requery('jquery')

$(function(){

$('li:odd').css('backgroundColor','lightblue')

$('li:even').css('backgroundColor',function(){

return '#'+'D97634'

})

})

//经过刚才的案例，webpack可以做哪些事情

(1).webpack能够处理js文件的互相依赖关系

(2).webpack能够处理js的兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能正常识别的语法

3. webpack.config.js

const path = require('path')

//这个配置文件，其实就是一个js文件，通过Node中的模块操作，向外暴露了一个配置对象

module.exports={

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

entry:path.join(_dirname,'./src/main.js'),

//入口，表示要使用webpack打包哪个文件

output:{

//输出文件的相关配置

path:path.join(_dirname,'./dist'),

//指定打包好的文件，输出到哪个目录中去

filename:'bundle.js'

//这是指定输出文件的名称

}

}

//当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步

(1).首先，webpack发现，我们并没有通过命令的形式，给他指定入口和出口

(2).webpack就会去项目的根目录中查找一个叫做webpack.config.js的配置文件

(3).当找到配置文件后webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象

(4).当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建

4.webpack-dev-server的基本使用

在package.json中

"scripts":{

//加一行

"dev":"webpack-dev-server"

}

(1).运行npm i webpack-dev-server -D把这个工具安装到项目本地开发依赖

(2).安装完毕后，这个工具的用法和webpack的用法，完全一样

(3)由于，我们是在项目中，本地安装的webpack-dev-server，所以无法把它当做脚本命令，在powershell终端中直接运行；(只有那些安装到全局-g的工具，才能在终端中正常执行)

(4).注意：webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack

(5).webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑内存中，所以，我们在项目根目录中，根本找不到这个打包好的bundle.js

(6).我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咱们的项目的根目录中，虽然我们看不到它，但是，可以认为，和dist src node_modules平级，有一个看不见的文件，叫做bundle.js

5.webpack-dev-server的常用命令参数

在package.json中

"scripts":{

//加一行

//--open自动打开浏览器

//--port自动设置端口

//--conteneBase以什么为根路径

//--hot热重载

"dev":"webpack-dev-server --open --port 3000 --conteneBase src --hot"

}

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

在webpack.config.js中

//启用热更新的第二步

const webpack = require('webpack')

module.exports ={

devSever:{

//这是配置webpack-dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些

open:true,//自动打开浏览器

port:3000,//设置启动时候的运行端口

contentBase:'src'//指定托管的根目录

hot:'true'//启用热更新的第一步

}

plugins:[//配置插件的节点

new webpack.HotModuleReplacementPlugin()//new一个热更新的模块对象，这是启用热更新的第三步

]

}

7.html-webpack-plugin的两个基本作用

//在内存中根据index模板页面，生成一个内存中的页面

//这个插件的两个作用

(1).自动在内存中根据指定页面生成一个内存页面

(2).自动把打包好的bundle.js追加到页面中去

安装：npm i html-webpack-plugin -D

在webpack.config.js中

//导入在内存中生成的HTML页面插件

//只要是插件，都一定要放到plugins节点中去

plugins:[//配置插件的节点

new htmlWebpackPlugin({

//创建一个在内存中生成HTML页面的插件

template:path.join(_dirname,"./src/index.html"),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面

filename:'index.html'//指定生成的页面名称

})

]

//当使用html-webpack-plugin之后，我们不再需要手动处理bundle.js的引用路径，因为这个插件已经帮我们自动创建了一个合适的script标签，并且引用了正确的路径

8.loader-配置处理css样式表的第三方loader

css会发起二次请求，不推荐直接引用

在main.js中

//使用import语法导入css样式

import './css/index.css'

//注意:webpack默认只能打包处理js类型的文件，无法处理其他的非js类型的文件

//如果要处理非js类型的文件，我们需要手动安装一些合适第三方loader加载器；

(1).如果想要打包处理css文件，需要安装cnpm i style-loader css-loader -D

(2).打开webpack.config.js这个配置文件，在里面新增一个配置节点，叫做module，他是一个对象，在这个module对象身上，，有个rules属性，这个rules属性是个数组，这个数组中，存放了，所有第三方文件的匹配和处理规则

//和plugins平级

module:{

//这个节点用于配置所有的第三方模块加载器

rules:[

//所有第三方模块的匹配规则

{ test: /\.css$/,use:['style-loader','css-loader']  }//配置处理.css文件的第三方loader规则

}

9.loader-分析webpack调用第三方loader的过程

//注意：webpack处理第三方文件类型的过程；

(1).发现这个要处理的文件不是js文件，然后就去配置文件中，查找有没有对应第三方loader规则

(2).如果能找到对应的规则，就会调用对应的loader处理这种文件类型；

(3).在调用loader的时候，是从后往前调用的；

(4).当最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去

10.loader-配置处理less文件的loader

在main.js中

//使用import语法导入less样式

import './css/index.less'

运行 cnpm i less-loader -D

配置规则

在webpack.config.js

module:{

rules:[

{ test: /\.less$/,use:['style-loader','css-loader','less-loader']}//配置处理.less文件的第三方loader规则

}

11.loader-配置处理scss文件的loader

在main.js中

//使用import语法导入less样式

import './css/index.scss'

运行 cnpm i scss-loader -D

配置规则

在webpack.config.js

module:{

rules:[

{ test: /\.scss$/,use:['style-loader','css-loader','scss-loader']}//配置处理.scss文件的第三方loader规则

}

12. 为什么要使用npm init初始化项目

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。、

13.webpack中url-loader的使用

//默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是URL地址，都处理不了

cnpm i url-loader file-loader -D

module:{

rules:[

{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}//处理图片路径的loader

//limit给定的值，是图片的大小，单位是byte字节，如果我们引用的图片，大于或者等于给定的limit值，则不会被转为base64格式的字符串，如果小于给定的limit值，则会被转为base64格式的字符串

//name设置图片为原名称，加hash值是为了防止两张相同名称的图片覆盖

}

]}

14.webpack中使用url-loader处理字体文件

在main.js中

//如果要通过路径的形式，去引入node_modules中相关的文件，可以直接省略路径前面的node_modules这一层目录，直接写包的名称，然后后面跟上具体的文件路径

import 'bootstrap/dist/css/bootstrap.css'

module:{

rules:[

{ test :/\.(tff|eot|svg|woff|woff2)$/,use:'url-loader'}//处理字体文件的loader

}

]}

15.关于webpack和npm中几个问题的说明

(1).json里不能写注释

(2).npm install

16.webpack中babel的配置

在main.js

//class关键字，是ES6中提供的新语法，是用来实现ES6中面向对象的编程方式

class Person{

//使用static关键字，可以定义静态属性

//所谓静态属性，就是可以直接通过类名，直接访问的属性

//实例属性：只能通过类的实例，来访问的属性，叫做实例属性

static info = {name:"zs",age:20}

}

var p1 = new Person()

访问Person类身上的info静态属性

console.log(Person.info)

//在webpack中，默认只能处理一部分ES6语法，一些更高级的ES6或者ES7语法，webpack是处理不了的，这时候就需要借助于第三方的loader，来帮助webpack处理这些更高级的语法，当第三方loader吧高级语法转为低级语法之后，会把结果交给webpack去打包到bundle.js中

//通过Babel，可以帮我们将高级的语法转换为低级的语法

//(1).在webpack中，可以运行如下两套命令，安装两套包去安装Babel相关的loader功能

//第一套包 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

//第二套包 cnpm i babel-present-env babel-preset-stage-0 -D

//(2).打开webpack的配置文件(webpack.config.js)，在module节点下的rules数组中，添加一个新的匹配规则；{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

//注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉，原因有两个

如果不排除node_modules，则babel会把node_modules中所有的第三方js文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢

哪怕最终，Babel把所有node_modules中的JS转换完了，但是项目也无法正常运行

//(3).在项目的根目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件，属于JSON格式，所以在写.babelrc配置的时候，必须符合Json语法规范：不能写注释，字符串必须用双引号

在.babelrc写如下的配置：preset翻译成【语法】的意思

//(4).了解：目前，我们安装的babel-persent-env，是比较新的ES语法，之前，我们安装的是babel-persent-es2015，现在，出现了一个更新的语法解释，叫做babel-persent-env，它包含了所有的和es相关的语法

{

"presets":["env","stage-0"],

"plugins":["transform-runtime"]

}

function Animal(name){

this.name=name;

}

Animal.info = 123

var a1 = new Animal('小花')

//这是静态属性：

console.log(Animal.info)

//这是实例属性

console.log(a1.name)