url-loader

默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是url地址都处理不了.
安装:cnpm install url-loader file-loader -D

image.png

默认会把图片进行base64格式编码成字符串,来减少二次请求.
在webpack.config.js中配置loader规则时,可以通过传参改为普通的图片地址而不进行base64编码

image.png

可以指定name属性,name=[hash:8]-[name].[ext]可以指定新的文件名为该文件的hash码前8位+"-"+之前的文件名称和后缀

image.png

使用url-loader处理字体

image.png

关于main.js中引入包的 问题

原因:bootstrap是node_modules下面的一个模块,所以不用写包名,他会现在核心模块中找,找不到就认为是第三方模块 然后去node_modules下去找这个模块.

image.png

错误调试

image.png

原因:package.json格式中不允许有注释,json的格式错误

image.png

原因:在package.json中的"devDependencies"节点中存在"webpack-dev-server",仅仅说明曾经使用cnpm install webpack-dev-server -D安装过,然后把名称写入到了"devDependencies"节点中.要以node_modules中存在模块为准.
如果上次出现安装模块失败,或者下载中断,应该在package.json文件中,清空"devDependencies",然后重新下载,防止项目重新启动又关联到错误的模块.

使用npm下载报错:
npm resource busy or locked.....
需要清理缓存:npm cache clean

babel模块

webpack中,只能默认处理一部分ES6的新语法,其他的就处理不了,必须依赖其他的loader来处理,处理完毕后,返回给webpack去打包到bundle.js中,通过babel可以帮我们把高级的语法转成低级的语法
1.在webpack中可以运行如下两套命令,安装两套包,去安装babel相关的loader功能
1.1第一套包:cnpm install babel-core babel-loader babel-plugin-transform-runtime -D(转换器)
1.2第二套包:cnpm install babel-preset-env babel-preset-stage-0 -D(语法插件)
2.打开webpack.config.js在module节点下的rules数组中,加入新的匹配规则:
2.1 {test:/.js$/,loader:'babel-loader',exclude:/node_modules/}
2.2 注意:在配置babel的loader规则的时候,必须把node_modules目录,通过exclude排除掉,原因:
2.2.1 如果不排除,node_modules,则babel会把node_modules中所有的第三方js文件都打包编译,这样会非常消耗cpu,同时打包速度非常慢.
2.2.2 哪怕,最终babel把node_modules中所有的js都转换完毕了,但是,项目也无法正常运行.
3.在项目的根目录中,新建一个 叫做 .babelrc的babel配置文件,这个配置文件,属于json格式,必须符合json语法规范,不能写注释,字符串必须用双引号.
3.1 在 .babelrc中写如下配置:
{ "presets":["env","stage-0"], "plugins":["transform-runtime"] }

image.png

注意:exclude和test,不能写字符串,否则,webpack在打包的时候会将node_modules中的js文件一起打包,项目启动会报错.

使用render方法来渲染组件

使用render方法相当于v-text指令,会把Vue实例中的el所指向的控制区域清空,替换成渲染好的html,必须要有return.
而使用components注册组件后,然后通过<组件名>这个标签引入,相当于插值表达式,不会影响el所控制区域的其他数据,可以存在多个组件.

image.png

在webpack中使用vue

在webpack中直接导入Vue的构造函数,功能不全,相比通过<script>标签导入的,他只是个阉割版.
页面报错:因为此时的Vue只是个runtime-only的方式.

image.png image.png

import Vue from 'vue'和 var vue = require("vue")的查找规则一样

1.找项目根目录中有没有node_modules的文件夹
2.在node_modules中根据包名,找对应的vue文件夹
3.在vue文件夹中,找一个叫做package.json的包配置文件.
4.在package.json文件中,查找一个main属性[main属性指定了这个包在被加载的时候 的入口文件]
解决方法1:
import Vue from "./node_modules/vue/dist/vue.js" 在main.js中导入Vue构造函数直接指定好.
解决方法2:
仍旧使用import Vue from "vue",但是在webpack.config.js中增加一个resolve节点,增加alias子节点,通过配置vue的真正的查找路径来解决.
这样配置后,当import Vue from "vue"之后,他会在配置文件中的resolve节点下进行匹配,发现是vue结尾,那么会去dist目录下查找指定的js文件并加载.

image.png

把组件单独抽取成.vue文件

.vue的格式:
使用import login from './login.vue'导入的模板实际上是 .vue 中三个标签组装好后的模板.

image.png

默认 webpack无法打包 .vue文件,需要安装相关的loader
cnpm i vue-loader vue-template-complier -D
安装之后,需要在webpack.config.js中新增一个module-->rules的规则
此时控制台还会报错:

image.png

原因: . Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
参考自:https://blog.csdn.net/cominglately/article/details/80555210

在webpack.config.js中导入vue-loader/lib/plugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
在plugins中加入new VueLoaderPlugin()就可以解决.

在webpack中如果想要通过vue把一个组件放到页面中去展示,vm实例中的render函数可以实现.

image.png

上述代码可以通过箭头函数简写成:
render c => c(login)

总结梳理:

1.安装vue包:cnpm i vue -S
2.由于在webpack中,推荐使用 .vue这个组件模板文件定义组件,所以,需要安装 能够解析这种文件的loader cnpm i vue-loader vue-template-compiler -D
3.在main.js中导入vue模块,import Vue from 'vue'
4.定义一个 .vue 结尾的组件,其中 组件有三部分组成,template script style
5.使用import导入这个组件
6.创建vm实例, var vm = new Vue({ el : "#app" , render: c => c(login) })
7.在页面中创建一个id为app的div元素,作为我们vm实例要控制的区域.

export default 和 export

在ES6中,也通过规范的形式,规定了ES6中如何导入和导出
ES6中导入模块,使用 import 模块名称 from '模块标识符'和import '表示路径'

在ES6中,使用export default和export向外暴露成员

在Node中,使用 var 名称 = require('模块标识符')
module.exports和exports来暴露成员

export default 向外暴露的成员,可以使用任意的变量接收.

在一个模块中,export default 只允许向外暴露一次

在一个模块中,可以同时使用export default 和export向外暴露成员.

使用export向外暴露的成员,只能使用 花括号 的形式,这种形式 叫做 [按需导出]

export可以向外暴露多个成员,同时 如果某些成员 在我们import的时候,不需要 则可以不在{ }中定义

使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收.

使用export导出的成员,如果需要使用别名,可以用 as 起别名import {name as n} from './test.js'

webpack集合vue-router模块

image.png

注意:app这个组件,是通过vm实例的render函数,渲染出来的,render函数如果要渲染组件,渲染出来的组件只能放到 el : "#app" 所指定的元素中去.

Account和Goodslist组件,是通过路由匹配监听到的,这两个组件,只能展示到属于 路由的<router-view>标签中去.

webpack实现子路由功能

和实现嵌套组件一样,通过children属性

image.png

组件中<style>标签的属性lang和scoped:

image.png

建议:每个组件的<style>标签都开启scoped属性,私有这个样式

抽取路由模块

image.png

可以把涉及路由的代码抽取到一个单独的模块中,然后向外暴露一个成员,也就是router实例,以供外部的main.js中的Vue实例使用.

组件中<style>元素中scoped属性的实现原理:

image.png

只要为样式开启了scoped属性,就会为响应的<div>元素添加一个data-v-xxx的属性,后期通过css的属性选择器来实现私有样式.