webpack loader

loader

什么是loader?

• loader是webpack中一个非常核心的概念

• webpack用来做什么呢？

  • 我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
  • 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
  • 对于webpack本身的能力来说，对于这些转化是不支持的。
  • 那怎么办呢？给webpack扩展对应的loader就可以啦。

• loader使用过程：

  • 步骤一：通过npm安装需要使用的loader
  • 步骤二：在webpack.config.js中的modules关键字下进行配置

• 大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。

CSS文件处理

• 项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。

  • 在src目录中，创建一个css文件，其中创建一个normal.css文件。
  • 我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。

  

• normal.css中的代码非常简单，就是将body设置为red

• 但是，这个时候normal.css中的样式会生效吗？

  • 当然不会，因为我们压根就没有引用它。
  • webpack也不可能找到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。

• 在入口文件(main.js)中引用：

const math = require('./js/mathUtils')

//必须在这里引用一次CSS文件
require('./css/mormal.css')

• 此时我们还需要去官网配置相应的css-loader

  • 打开www.webpackjs.com

  • 点开中文文档

  • 点击右上叫的LOADERS

  • 打开loaders文件夹下面的样式

  • 点击样式下的css-loader

  • 就会有相应的安装配置方法

    • css-loader的安装

    npm install --save-dev css-loader

    • 在webpack.config.js配置

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

    • test: /\.css$/匹配以css结尾的文件
    • css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
    • style-loader 将模块的导出作为样式添加到 DOM 中
    • 使用多个loader时，顺序从右向左使用(将会报语法错误)

less文件处理

• less文件处理和css文件相似

• 配置方法

  • less-loader的安装

  npm install style-loader --save-dev

  • 在webpack.config.js配置
    • 因为之前已经有rules了所有直接在里面写即可
    • 可以写成一个对象形式

    {
        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: /\.less$/匹配以less结尾的文件

图片文件处理

• 同样先去官方文档找到安装及配置方法

  • url-loader的安装

  npm install --save-dev url-loader

  • 在webpack.config.js配置

    rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }
      ]
  

  • test: /\.(png|jpg|gif)$/匹配以png或jpg或gif结尾的文件
  • limit属性,默认8kb
    • 当加载的图片小于limit时，会将图片编译成base64字符串形式
    • 当加载的图片大于limit时，将会通过file-loader进行处理，此时我们需要使用file-loader模块进行加载

• file-loader模块

  • file-loader的安装

  npm install --save-dev file-loader

  • 在webpack.config.js配置
    • 在output代码中添加

    publicPath: 'dist/'
    

• 再次打包，就会发现dist文件夹下多了一个图片文件

• 默认情况下，webpack会将生成的路径直接返回给使用者

• 但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路下再添加一个dist/

• 我们发现webpack自动帮助我们生成一个非常长的名字

  • 这是一个32位hash值，目的是防止名字重复
  • 但是，真实开发中，我们可能对打包的图片名字有一定的要求
  • 比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

• 所以，我们可以在options中添加上如下选项：

options: {
    limit: 8192,//8kb
    name: 'img/[name].[hash:8].[ext]'
}

• img：文件要打包到的文件夹
• name：获取图片原来的名字，放在该位置
• hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
• ext：使用图片原来的扩展名