- 打包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,按理说打包后应该可以正常显示的,但是这里并没有显示,反而报错了.
代码语言：javascript复制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
解决方法
- 修改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
