常用loader以及webpack的Vue安装

• 打包less ---------loader
• 打包图片---------loader
• es6转es5--------loader

一 less文件处理 – 准备工作

如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？ 我们这里以less为例，其他也是一样的。

我们还是先创建一个less文件，依然放在css文件夹中

没装loader的情况下

• 首先，还是需要安装对应的loader ,注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译
• 其次，修改对应的配置文件,添加一个rules选项，用于处理.less文件

二 图片文件处理-准备工作

• 首先，我们在项目中加入两张图片：一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb) 待会儿我们会针对这两张图片进行不同的处理
• 我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：

• 如果我们现在直接打包，会出现如下问题

• 图片处理，我们使用url-loader来处理，依然先安装url-loader
• 修改webpack.config.js配置文件：
• 再次打包，运行index.html，就会发现我们的背景图片选出了出来。而仔细观察，你会发现背景图是通过base64显示出来的OK，这也是limit属性的作用，当图片小于8kb时，对图片进行base64编码

那么问题来了，如果大于8kb呢？我们将background的图片改成test02.jpg

这次因为大于8kb的图片，会通过file-loader进行处理，但是我们的项目中并没有file-loader,所以，我们需要安装file-loader,npm install --save-dev file-loader再次打包，就会发现dist文件夹下多了一个图片文件

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确

• 默认情况下，webpack会将生成的路径直接返回给使用者
• 但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/

可以在webpack.config.js output里配置publicPath,他会给每个url前加上个拼接的路径

在上述打包后的文件夹dist中，我们发现webpack为打包后的图片自动帮助我们生成一个非常长的名字

• 这是一个32位hash值，目的是防止名字重复
• 但是，真实开发中，我们可能对打包的图片名字有一定的要求
• 比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

所以，我们可以在options中添加上如下选项：

• img：文件要打包到的文件夹
• name：获取图片原来的名字，放在该位置
• hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
• ext：使用图片原来的扩展名

另外上面我们需要用[]取值,如果我们直接用name他就真的就是命名就是“name”

总结一下：

• 普通图片打包对于limit限制大小以内的可以直接base64转码成一个字符串无需单独打包成一个文件放在打包文件夹，自然无需重新配置路径
• 如果要打包超过limit限制的图片，我们必须再引入一个file-loader且我们需要在package.json 的output中去配置一个publicPath拼接打包后的文件夹路径。如publicPath:"dist/"

三 Es6 转为 Es5

我们在之前的打包中，发现ES6的语法并没有转换为ES5，比如说常量的定义const。 那么由于不是所有的浏览器都支持ES6语法的，可能在这些浏览器就无法使用，为了让适用性更高，我们就可以把ES6打包成ES5。

如果希望将ES6的语法转成ES5，那么就需要使用babel

。而在webpack中，我们直接使用babel对应的loader就可以了。 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 配置webpack.config.js文件

webpack的vue安装

我们会使用Vuejs进行开发，而且会以特殊的.vue文件来组织vue的组件。所以，下面我们需要学习一下如何在我们的webpack环境中集成Vuejs.我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装 注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖下载时候不必--save-dev直接--save即可 npm install vue --save

如上图所示我们在main.js中定义了一个全局vue,按理说打包后应该可以正常显示的,但是这里并没有显示,反而报错了.

bundle.js:1355 [Vue warn]: 
You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.

啥意思啥原因呢?

• 实际上是因为vue分俩版本一个runtime-only和一个runtime-compiler
• 1.runtime-only->代码中，不可以有任何的template
• 2.runtime-compiler->代码中，可以有template，因为有compiler可以用于编译template

解决方法

• 1. 修改webpack的配置，添加如下内容即可

resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }

这是为啥呢?其实是因为配置好'vue$':'vue/dist/vue.esm.js'后,我们在组件中在进行导入的时候 import vue from "vue",这个from vue中的vue就是从我们安装好的node_modules/dist/vue.esm.js取出vue