webpack基本配置（二）--url和babel

配置url的loader

在页面上引用图片

• 安装npm i url-loader file-loader -D
• 打开webpack.config.js配置文件

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=91560'}//处理图片路径的loader
// limit给定的值是图片的大小，单位是byte。如果引用的图片大于给定的limit值，则不会被转为base64格式的字符串，如果图片小于或等于给定的limit值，则会被转为base64字符串
//此时我的图片大小是91560byte的

当图片小于或等于给定的limit值时：
当图片大于给定的limit值时：（此时地址为hash值）

若要保存原有图片名称，则：

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=91560&name=[name].[ext]'}

效果如下：

图片路径为根目录下，虽然我们看不见，在内存中

问题：若放置了两张同名图片（分别在两个images文件夹中），则第二张会覆盖第一张，导致显示两张一样的图片

• 解决：为图片url再填上几位hash值但同时又保留原来的名字

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=91559&name=[hash:8]-[name].[ext]'}

在页面上引用字体图标

1. 引用bootstrap npm i bootstrap -S
2. 在main.js中引入

// 引入bootstrap
import 'bootstrap/dist/css/bootstrap.css'

3. 配置webpack.config.js

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

注意：json文件中不能写注释，并且每次修改完配置文件后应该重新开启终端

babel的配置

在webpack中默认只能处理一部分ES6新语法，在一些更高级的ES6语法或ES7语法，webpack是处理不了的，此时用babel即可

例如在main.js中：

	// class关键字，是ES6中提供的新方法，用来实现面向对象编程的方式
	class Person{
    	static info = {name:'zs',age:12}
	}
	console.log(Person.info);

1. 两套包来安装babel相关的loader功能：（两套包都要装！！）

• npm i babel-core babel-loader babel-plugin-transform-runtime -D
• npm i babel-preset-env babel-preset-stage-0 -D

2. 打开webpack.config.js，在module节点下的rules数组中，添加一个新的匹配规则：

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

注意：在配置babel的规则时，必须把node_modules目录通过exclude排除掉，原因有两个：
1.如果不排除node_modules，则babel会把node_modules中所有的第三方js文件都打包编译，这样会非常消耗CPU，同时，打包速度慢
2.哪怕，最终babel把所有node_modules中的js转换完毕了，项目也无法正常运行

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

	{
		"presets":["env","stage-0"],
		"plugins":["transform-runtime"]
	}

此时报错：提示需要安装babel-loader@7
则 npm install @babel/core @babel/preset-env -D
若任然报错，查看错误提示：

• Couldn’t find preset “env” relative to directory
  解决：npm install babel-preset-env --save-dev
• Couldn’t find preset “stage-0” relative to directory
  解决：npm i -D babel-preset-stage-0

之后在重新运行即可，结果如下