webpack之loader04

什么是loader

webpack 支持使用 loader 对文件进行预处理。

webpack不仅可以自动处理js之间相关的依赖，还可以加载css文件、图片、将ES6转成ES5代码、TypeScript转成ES5代码，scss、less转成css，.jsx、.vue文件转成.js文件等。

而webpack本身是不支持这些转化的，故需要给webpack扩展对应的loader。

loader的使用

初始化：npm init -y

1、css文件的处理

把css文件当成模块打包，在入口文件里面，写上依赖的css文件

新建一个normal.css文件

body{
  background-color: pink;
}

文件结构目录（创建文件夹有规范，入口一般放在外面）+在入口文件中引入css文件

若不在入口文件中引用css文件，则webpack会找不到normal.css文件，因为webpack是通过入口查找其他依赖的文件，而入口文件只有一个。

通过npm安装需要使用的loader

可在webpack官网中找到很多loader，并学习对应的用法。

此处需要安装css-loader、style-loader

在终端输入：
npm install --save-dev css-loader
npm install --save-dev style-loader

在webpack.config.js中的modules关键字下进行配置。

webpack.config.js

// 通过node里面的path包,动态获取路径
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        // 正则表达式，匹配所有的css文件
        test: /\.css$/i,
        // css-loader只负责将css文件进行加载，style-loader负责将样式添加到dom对象上
        // 使用多个loader时从右往左读取
        use: ['style-loader','css-loader'],
      }
    ]
  }
}

输入npm run build运行查看效果（npm run build使用的本地的webpack打包，在cmd等终端直接使用webpack打包使用的是全局的webpack）

效果：

若webpack.config.js中顺序为

use: ['css-loader','style-loader']

运行效果为

谨记！！！使用多个loader时，loader的读取顺序为从右向左读取

2、less文件的处理（原理同上）

在css文件夹中创建less文件

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

在main.js中引入less文件

// CommonJS模块化规范，导入
const {add, mul} =require("./js/mathUtility");

console.log(add(5,6));
console.log(mul(11,2));

// ES6模块化规范，导入
import {name,age,wish} from "./js/personProps";

console.log("name=" + name + ",age=" + age + ",wish=" + wish);

// 引入CSS文件
require("../src/css/normal.css");

// 引入Less文件
require("../src/css/special.less");
document.writeln("webpack YYDS");

安装less-loader

npm install --save-dev less-loader less

安装成功

在webpack.config.js中配置.less

// 通过node里面的path包,动态获取路径
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 正则表达式，匹配所有的css文件
        test: /\.css$/i,
        // css-loader只负责将css文件进行加载，style-loader负责将样式添加到dom对象上
        // 使用多个loader时从右往左读取
        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

最终效果

3、图片文件的处理（原理同上）

在css文件中引用图片url

normal.css

body{
  /*background-color: pink;*/
  background-image: url("../imgs/backimg01.jpg");
}

在main.js中引入css文件

在之前的操作中已经引入

安装url-loader

在终端输入npm install --save-dev url-loader

安装成功

在webpack.config.js中配置图片文件

// 通过node里面的path包,动态获取路径
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        // 正则表达式，匹配所有的css文件
        test: /\.css$/i,
        // css-loader只负责将css文件进行加载，style-loader负责将样式添加到dom对象上
        // 使用多个loader时从右往左读取
        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
        }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              // name: 'imgs/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

limit属性规定了图片大小的分界线。

• 当加载的图片 < limit规定的大小时，图片被编译为base64字符串形式
  

• 当加载的图片 > limit规定的大小时，使用file-loader进行加载
  
  运行时提示找不到file-loader
  
  在终端输入npm install --save-dev file-loader安装file-loader
  
  运行查看效果
  

规范命名格式和路径

webpack自动打包图片时，图片的命名是一个32位的hash值（防止图片重名），

在webpack.config.js中图片文件配置处添加name属性

name: 'imgs/[name].[hash:8].[ext]'解析：

• imgs：文件打包到imgs文件夹下；
• [name]：获取图片原来的名字；
• [hash:8]：为防止图片名字冲突，此处依然使用hash值，但只保留8位；
• [ext]：使用图片原来的扩展名。

效果：

规范路径：
在webpack.config.js的出口中添加publicPath: 'dist/'。
打包后的文件在dist文件夹下，若此处不配置则会出现图片路径有问题导致加载失败的情况。

最终效果：

补充：
非盈利组织网站后缀为org，如：webpack.js.org