Vue第六天学习（file-loader babel webpack深入学习等...）

Vue第六天学习

file-loader（解决webpack打包图片路径问题，字体路径问题）

webpack中 babel 的配置（处理高级的es6语法或者es7语法）

Vue中的render 函数

在 webpack 构建的项目中，使用Vue 进行开发

export default 和 export 的使用方式

结合webpack使用 vue-router

组件中style标签lang属性和scoped属性的介绍

抽离路由模块

一个人如果不想输，就要不断学好眼前的东西，它们将来都会大有用处…

webpack 后续问题

问题：Webpack打包图片路径问题

• 在页面中引入图片有两种方式
  • img标签引入
  • css引入

解决方案：Webpack使用file-loader处理图片

安装：file-loader 包

1. 运行 npm i url-loader file-loader -D 来安装 file-loader 包

​

2. 配置 webpack.config.js 文件

3. 运行npm run dev

file-loader 参数

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

  

  

• name 属性 使图片路径url 不变

处理字体文件 路径问题

使用 file-loader

问题描述：引入bootstrap 字体图标库，但报错！

解决方案：

1. 配置 webpack.config.js

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

2. 运行 npm run dev

webpack中 babel 的配置

babel介绍

问题描述：

1. webpack中默认只能处理一部分es6语法，一些更高级的es6语法或者es7语法webpack处理不了，这时候就需要借助第三方loader帮助webpack处理这些语法
2. class是es6中提供的语法，是用来实现es6中面向对象编程的方式，class和static与Java中类似

解决方案：

1. 通过 babel 可以将高级语法转化为低级语法
2. 安装，运行两个命令，安装两套包，去安装 babel 相关的功能
   • 第一套包：npm i babel-core babel-loader babel-plugin-transform-runtime -D
   • 第二套包：npm i babel-preset-env babel-preset-stage-0 -D
3. 打开webpack配置文件，在module节点写的rules数组中添加一个新的匹配规则

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

排除node_module目录的原因:

• 如果排除node_module，babel会把node_module目录下的所有第三方js文件都打包编译，这会非常消耗CPU，同时打包速度非常慢
• babel 把node_module中的js文件转化完毕项目也无法正常运行

4. 4.在项目的根目录中新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于 json格式

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

报错：

**解决方案：**执行 npm i babel-loader@7

报错：

啊啊啊啊~~ 崩溃！！

修改之后还是跑不起来----醉了！！

报错：

升级总结（来自百度）

-babel 升级 7.X 踩坑记录

1. babel 包名改变，以前安装是 npm i babel-* 现在安装 babel 系列需要写成 npm i @babel/*
2. .babelrc 文件写法改变，preset plugins 等全部写成 @babel/* 的形式

npm:
- babel-preset-env
+ @babel/preset-env
- babel-preset-react
+ @babel/preset-react
- babel-preset-stage-0
 
.babelrc:
- "presets": ["react", "env", "stage-0", "mobx"]
+ "presets": ["@babel/preset-react", "@babel/preset-env", "mobx"