4、webpack中loader的使用
前面介绍了webpack,使用webpack主要是模块化开发我们的代码并且webpack还会自动处理模块之间的依赖。但是前端项目中还需要其他文件，例如css、图片，也包括将一些高级的ES6语法转化成ES5语法、vue文件转换成js文件等，对webpack本身来讲这些转化他本身是不支持的此时就需要给webpack安装扩展功能loader。
4.1 css-loader和style-loader的使用
不同的loader负责处理不同的格式，需要某个loader时要使用npm将loader下载下来，然后在webpack.config.js文件中的modules关键字下进行配置。
假设项目中存在css文件：
我们知道要想使该css文件生效的话需要在index.html文件中中引用该css文件，但是需要注意的是大型项目中的css样式有上百个难道需要我们一个一个引用吗？当然不是我们需要将css文件模块化引入到打包文件 bundle.js文件中。但是在当前项目中入口文件main.js中没有引入css文件，所以使用指令npm run build 并不能将css文件打包到bundle.js文件中。只要将css模块引入到main.js文件中就能将css样式引用：
然后就要将main.js文件打包，那么webpack既然处理不了css文件，那处理css文件的loader是哪个呢？给出官网地址，可以在中文官网找到答案：
loaders | webpack 中文网 (webpackjs.com)
带你进去之后会有详情的下载步骤,这里要注意的是，在本项目中我的webpack版本是5.0.0。因为安装3.6.0的版本css loader 和style loader 安装不上。
4.2 less-loader的使用
less文件要想被项目加载就需要引入到项目的入口文件main.js中。本质上lessloader的作用是将less文件转换成css文件
1. /*引入less文件*/ 2. require('./css/special.less')
使用指令npm install --save-dev less-loader less 加载lessloader,然后在webpack.config.js文件中添加相关配置， 再进到项目中执行打包指令: npm run build，即可。
4.3 url-loader、file-loader
在css文件中使用图片时也需要下载图片的loader,也就是url-loader@1.1.2，下载完后还需要在配置文件中添加相关配置：
module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { /*当图片的大小小于limit(KB)时会使用url-loader将图片编译成base64的字符串形式*/ limit: 70000 /*当图片的大小大于limit时，会使用file-loader对图片进行加载。使用file-loader * 不需要进行配置只需下载file-loader即可*/ } } ] } ] }
然后需要进行重新打包：npm run build
运行index.html文件：
当图片的大小大于limitKB时需要加载file-loader@3.0.1,然后将文件重新打包。
4.4 babel-loader
转成ES5的原因是现在很多的浏览器不支持ES6的语法（chrom支持），为了让更多浏览器兼容项目，需要使用babel-loader,首先需要在配置文件中添加配置：
{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } }
然后在终端使用指令：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
然后重新打包运行，观察dist文件夹下面的bundle.js文件发现变成ES5的语法格式。
5、webpack中配置Vue
如果在项目中想使用vue的话需要添加vue的依赖，之前使用<scprit>标签引用的vue不是模块化管理的vue。在引入模块化思想之后需要使用npm安装：npm install vue@2.5.21 --save 因为整个项目都是使用vue所以不需要加--dev 然后在配置文件中添加resove属性：
resolve:{ alias:{ "vue$":'vue/dist/vue.esm.js' } }
完成上述的配置之后就能使用了：
6、el和template的区别
在实际的开发中index.html文件是不会修改的也就是说index.html文件只是负责引入bundle.js文件和编写vue实例挂载的对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- vue挂载的对象 --> <div id="app"> </div> <!-- 引入bundle.js文件 --> <script src="./dist/bundle.js"></script> </body> </html>
如果相使用vue实例内部的数据的话该怎么写呢？需要写在vue的template和属性中。最后编译的时候会将index.html文件中的<div></div>替换成template中的内容：
/*引入vue*/ import Vue from 'vue' const app = new Vue({ el:"#app", template:` <div> <p>{{message}}</p> </div> `, data:{ message:"哈哈" } })
重新打包运行：
查看编译后的代码：
发现之前的<div id='app'></div>被替换了~
结论：vue实例中的template会在编译的时候替换el
但是假设vue实例中的template代码很多呢？写在template中就不合适了，就需要抽取。
也就是将模板抽取成模板对象，在vue实例中注册模板对象。代码如下：
/*组件*/ const APP = { template:` <div> <p>{{message}}</p> </div> `, data(){ return{ message: "KJHJADGFLASGKJHFLASJKDFHASKJDLFHLJKSADF" } } } /*引入vue*/ import Vue from 'vue' const app = new Vue({ el:"#app", template:'<APP/>', /*注册组件*/ components:{ APP } })
进一步抽取，我们将组件抽取到转门写vue的文件夹vue中文件的名字叫app.js。
重新将项目打包运行即可。
但是在app.js中模板代码和js代码仍然 没有分离因此需要对模板再进行抽取。所以现在需要在vue文件夹下创建文件App.vue。但是在创建App.vue文件时需要加载loader文件：npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev
还要在配置文件中的module中添加相关配置如下：
在main.js文件中导入App.vue文件并打包运行即可。
注意：
