Vue.js学习第八天——webpack中的loader、配置vue及插件使用

Vue.js学习第八天——webpack中的loader、配置vue及插件使用

- webpack中的loader

昨天我们学习了webpack中的css-loader和style-loader，今天我们来学习剩下常用的几个loader

1. less-loader
顾名思义，这个loader模块是用来加载less文件的，安装命令为npm install --save-dev less-loader less 前一个less-loader是用来加载less文件，后一个less是为加载less提供的支持文件，用来转化less成css，安装完成后进行相应的配置即可，配置在webpack中的loader里都有，不过这里我还是贴一下好了

{
   
  test: /\.less$/,
  use: [{
   
      loader: "style-loader" // creates style nodes from JS strings
  }, {
   
      loader: "css-loader" // translates CSS into CommonJS
  }, {
   
      loader: "less-loader" // compiles Less to CSS
  }]
},

2. url-loader和file-loader
less文件处理完了之后，还有图片文件要处理，这时候轮到我们的url-loader出场了，安装命令为npm install --save-dev url-loader，安装完成后，进入配置，代码如下

{
   
 test: /\.(png|jpg|gif)$/,
 use: [
   {
   
     loader: 'url-loader',
     options: {
   
       // 当加载的图片大小小于limit时，他会将图片编译成base64字符串形式 不需要单独的文件来存储
       // 当加载的图片大小大于limit时，使用file-loader模块进行加载 会单独打包成另一个文件
       // 这个值默认是8k
       limit: 8192,
       name: 'img/[name][hash:8].[ext]'
     }
   }
 ]
},

我们注意到，这里面有一个limit属性，后面跟着的是默认值8192，也就是8k，这里我直接说一下他的作用好了

1. 当我们的图片文件小于这个limit值，这时候，图片会被编译成base64的字符串形式，不会生成新文件，这时候正常打包文件即可，页面也能正常显示；
2. 当我们的图片文件大于这个limit值，这时候，我们将文件打包时就会报错，并且要求我们安装file-loader，安装命令为npm install --save-dev file-loader,这个模块不需要另外进行配置，安装完成即可，这个时候我们就可以尝试着重新打包文件，发现并没有报错，但是当我们在浏览器打开它时，发现图片并不能显示，并且控制台显示找不到此文件，文件的路径为网站的根目录，并且在dist目录(存放打包完成后的目录)下，发现生成了一个新的图片文件，文件名为hash类型的，目的是防止重复，所以我们需要在webpack.config.js文件中添加publicPath的一个配置，目的是将路径前加入dist/这个路径，使得其能够找到此图片，具体的配置如下

output: {
   
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        // 涉及到路径 他都会在前面加一个dist 最后就不需要了
        publicPath: 'dist/'
    },

当然在我们后期进行开发的时候，由于index文件都要统一放置在dist目录下，所以就不存在找不到路径这一说了，到时候删去即可。
这时我们发现文件的名字很乱，这样就会导致我们一时间分不清是什么文件，所以我们还需要在limit下添加一个name属性，如上面的代码所示，这样当图片文件大于limit值时，会自动将生成的新文件在我们的name配置下的路径，并且我们还能指明它的文件名称，这样就方便辨认了。

3.babel-loader
当我们在查看打包完成的bundle.js文件时，我们发现其中还是有ES6的语法，这就意味着在不支持ES6的浏览器中，我们的代码是没有办法运行的，此时就需要我们采用babel-loader的模块帮助我们将ES6的语法转换成ES5。安装命令为：npm install babel-loader@7 babel-core babel-preset-es2015，官网上说的命令为npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack或npm install babel-loader babe