第三章 webpack中babel的配置

3.1 关于babel的基本配置

3.1.1 安装对应的包

3.1.2 书写对应的配置规则

3.1.3 新建.babelrc文件来并进行配置

3.2 关于Babel的几点说明

第四章使用Vue实例的render方法渲染组件

第五章 webpack结合Vue进行使用

5.1 区分webpack中导入Vue和普通网页使用script导入Vue

5.1.1 在以前的网页中如何使用Vue

5.1.2 用webpack导入Vue

5.2 在vue中结合render函数渲染指定的组件到容器中

5.3 总结梳理webpack中如何使用vue

5.4 export default 和export的使用方式

第六章 webpack与路由结合使用

6.1 webpack使用vue-router

6.2 webpack实现children子路由

6.3 webpack抽离路由模块

第七章组件中使用style标签lang属性和scoped属性

第一章 webpack中url-loader的使用

1.1 用url-loader读取图片

我们想给红色的div加个背景图片,所以在index.scss中书写背景图片样式

1.首先安装插件

2.在webpack.config.js中书写匹配规则

3.可以在user后面的url地址中填入参数

我们发现图片的名字改变了,主要是为了避免重名,可能重名的情况如下图,都会在根目录下建立一个生小孩的图片,最终后者会覆盖前者.

为了解决这种情况,我们可以在图片名字的前面加一个8位的哈希值.即可解决问题.

1.2 用url-loader处理字体文件

1. 安装bootstrap

2. 修改根目录

一开始的根路径设置为,找不到此目录,这是因为src与node_modules是平级的

删除dev下的contentBase src,交由根目录进行托管

再次加载,成功

这是以前的导入方式,现在我们用新的方式来导入

因为bootstrap下有听多种后缀名,我们需要在webpack.config.js下进行新的配置

第二章 webpack和npm中几个问题的说明

注意下json里面不能写注释,webpack.config.js中可以写注释是因为它是一个js文件,要以文件最后的结尾来看文件的类型.

如果我们遇到如下类似的问题

可能是依赖没装上,不能看package.json中有,如下图,就说已经装上了,这只是记录你以前装过,不代表现在有

我们可以执行cnpm install来重新进行安装

有时我们会装一些包,但是因为太慢所以我们用ctrl+c停止了其运行,又重新安装成功,等我们运行npm run dev时,又各种报错说缺少什么包,原因是我们刚才有些包装到一半被强行终止了,遇到这种情况我们就把node_modules删了,再重新安装一遍就好了.

第三章 webpack中babel的配置

为什么需要babel:

3.1 关于babel的基本配置

例如我们再main.js中写了如下代码,想要处理就需要更高级的语法.

3.1.1 安装对应的包

3.1.2 书写对应的配置规则

在webpack.config.js中配置匹配规则

3.1.3 新建.babelrc文件来并进行配置

运行成功

3.2 关于Babel的几点说明

刚才导入了两套包

第一套包相当于babel的转换工具,只负责转换,它不知道它们的对应关系

第二套包相当于语法.

如果只安装一个将不能正常工作,因为我们要把class语法转换成ES3的语法,即function构造函数来模拟,你不知道class person与static info对应ES3的哪种语法,第一套包只负责转换,但是它不知道高级语法到低级语法的对应关系,如果真的想进行转换,我们还需要真正的语法插件,这个语法插件就像一本字典,比如info对应的中文意思是信息,中文可以想象成低级的es3语法,英文可以想象成高级的es6语法,babel-preset这个就提供了对应关系,但是只有转换器也是没办法工作的,所以我们还需要对应的转换器.当转换器转换到某一行时,交给babel-preset去翻译,然后交给bundle去打包去合并(这个是老师的原话,我也没搞清楚具体啥意思...,猜测是第一套包对整体进行把握,第二套包是对细节进行翻译)