webpack之loader

什么是loader?

loader是webpack中一个非常核心的概念，我们知道webpack可以用来处理并打包我们的js代码，并且能够自动处理js之间相关的依赖。但是，在开发过程中，我们不仅仅需要处理基本的js代码，有时候也需要加载css、图片，也包括一些高级的将ES6转成ES5的代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身来说，还不能够完全支持，需要对webpack扩展相应的loader才能够解决这些问题。

loader的使用过程：

1. 通过npm安装需要使用的loader；
2. 在webpack.config.js中的modules关键字下进行配置。

css文件的打包处理

添加css文件一起打包，新建css文件normal.css

body{
  background-color: red;
}

然后再main.js中进行添加该css文件的依赖

//依赖css文件
require('./css/normal.css')

 安装loader需要到webpack官方文档中去查找合适的loader:

webpack-loaderhttps://www.webpackjs.com/loaders/

因为我们要打包css样式文件，所以需要安装相应的loader ，然后进行配置即可。

安装css-loader和style-loader一定要注意版本：

npm install css-loader@0.28.11 --save-dev

 npm install style-loader@0.23.1 --save-dev

配置webpack.config.js文件 

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

在此打包：npm run build

 运行之后：

less文件的打包处理

添加special.less文件：

@fontSize: 50px;
@fontColor:white;

body{
  font-size: @fontSize;
  color: @fontColor;
}

在main.js文件中使用该文件：

//依赖less文件
require('./css/special.less')
document.writeln('<h2>webpack/css/style/less</h2>');

安装less-loader:

npm install --save-dev less-loader@4.1.0 less@3.9.0

配置webpack文件：

  module: {
    rules: [
      {
        test: /\.css$/,
        //使用多个loader时从右往左添加
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到DOM中
        use: ['style-loader','css-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
      },

    ]
  }

打包运行：npm run build

 运行结果如下：

图片文件的处理

新建img文件夹，添加图片资源

打开normal.css文件将其中一张图片当成页面的背景图：

body{
  background-color: red;
  background: url('../img/test1.jpg');
}

安装对应的loader:  url-loader

npm install --save-dev url-loader@1.1.2

配置webpack.config.js文件

 //配置url-loader:打包图片文件
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //所加载的图片小于limit时,会将图片编译成base64字符串形式
              //当所加载图片大于limit时，需要安装file-loader
              limit: 20000
            }
          }
        ]
      }

为保证能够正常打包，安装file-loader

npm install --save-dev file-loader@2.0.0

 打包：npm run build，运行结果如下（图片本身大小<limit）：

如果图片本身大于limit值时，会通过url的方式进行加载，且会放到dist文件夹下面，为防止命名重复以hash值来命名。此时无法直接加载到页面，有两种方式可以解决：

1.发布时将index.html文件放到dist文件下可以正常运行（此时的url地址无误）；

2.调试时需要在webpack.config.js文件中配置publicPath，信息，也能够成功加载。

publicPath:'dist/'//凡是涉及到url的内容会自动在前面拼接上dist/，根据情况来决定是否需要添加

为了能够将打包的结果更加清晰明了，可在options中进如下配置：

//配置url-loader:打包图片文件
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //所加载的图片小于limit时,会将图片编译成base64字符串形式
              //当所加载图片大于limit时，需要安装file-loader，打包时会将图片资源一起打包至dist文件夹下面，需要配置webpack.config.js文件中的publicPath
              //options选项中能够配置更多信息，使打包的成果更加清晰
              limit: 10000,
              name:'img/[name].[hash:8].[ext]'//在dist文件夹中自动创建img文件夹，将打包图片重命名
            },
            
          }
        ]
      }

运行：npm run build

 

 同样能够正常加载。

ES6语法的处理

前面在进行打包处理时，并没有将ES6的语法转成ES5，那么在一些旧版的浏览器上可能会出现无法识别的问题，因此，需要将bundle.js文件中的所有代码转成ES5的东西。需要使用babel工具进行转换，在webpack中安装相应的loader即可：

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js文件：

//配置ES6转ES5
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,//exclude：排除，只打包src文件夹下的内容
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

重新打包： npm run build

此时bundle.js文件中不再有ES6的语法。

注：在package.json文件中可以查看已经安装的一些loader信息：