webpack初学第二篇：什么是loader(上)

这是今天抽空学习做的学习笔记呀，今天了解了一点点loader，学了一些有关使用loader进行静态资源打包的方式，比如 css文件，sass文件，图片等打包。还没学完，明天继续学。要下班啦，回家做饭洗衣服了~

什么是loader

loader可以将文件从不同的语言(比如TypeScript)转换为JavaScript，或者将内联图像加载为数据url,甚至允许你直接从JavaScript模块中导入CSS文件.

如何打包图片/（url-loader）

举个例子，比如加载一个图片，如下所示： 首先安装用来打包图片的相关的 loader，这里我们采用 url-loader
安装代码：npm install url-loader --save-dev
也可以直接写成：npm install url-loader -D

// 打开index.js文件

// 引入图片文件
import zl from './zl.jpg';

// 创建一个 Image 对象
var img = new Image();
// 定义 Image 对象的src，这样做相当于给浏览器缓存了一张图
img.src = zl;

// 挂在id为'box'的DOM元素后面
document.getElementById('box').append(img);

这时候按照上一篇笔记里的webpack配置去打包，发现图片是无法显示出来的，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。
因此，我们需要在webpack.config.js文件中去进行loader配置

// 打开配置文件 webpack.config.js

const path = require('path')

moudule.exports = {
    mode: 'development',
    entry: './index.js',
    
    module： {
        rules:[ // 其中包含各种loader的使用规则
            { 
                test: /\.jpg$/, // 正则表达式，表示打包.jpg后缀的文件
                use: {
                    loader: 'url-loader', //针对css文件使用的loader，在这里我使用了url-loader
                    options: { // 当前loader需要的特殊配置
                        name: '[name].[ext]' // 将打包后的图片名字保持原来的名字不变
                        outputPath:'image', // 表示如果图片高于limit里设置的大小，那么图片就放在image文件夹下
                        limit: 8129 //如果图片低于limit里设置的大小的图片进行base64编码，以减少http请求
                   }
            }
        }]
    },
    
    output: {
        filename: 'bundle.js',
        path:path.resolve(_dirname, 'bundle')
    }
}

如何打包css 文件/（css-loader，style-loader）

如下所示： 首先，再src文件夹下创建新的 index.css 文件
目录大概如下:

+ src/
|   + index.css/
|   + index.js/
|   + zl.jpg/ 

在index.css文件里书写样式

.zl {
    width:100px;
    height:100px;
}

打开 index.js 文件

import zl from './zl.jpg';

// 引入 .css 文件
import 'index.css'

var img = new Image();
img.src = zl;

// 给Image对象创建相应的 class --->.zl
img.classList.add('zl')

document.getElementById('box').append(img);

打开 webpack.config.js 文件

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images',
            limit: 8129,
          },
        },
      },
      
      // 在这里配置打包css文件的 loader
      {
        // test 表示打包.css后缀的文件
        test: /\.css$/, 
        // 需要'style-loader'结合'css-loader'使用，因此写数组
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.js',
  },
};

打包运行后，图片的宽高就会成功变成我们所设置的150px。

打开 F12 ，点击 Elements，就能看见 head 里有一个 style 标签，放着我们写的 css 代码

==所以在打包 css文件的时候，一定要记得css-loader要配合style-loader使用==

如果要用“新潮的”sass 或 less 文件又怎么打包？

举个例子，如何打包 scss 文件（sass-loder）

如果仅仅只是使用css-loader和style-loader进行打包，项目运行不会报错，但是页面样式是不会正常显示的
因为css-loader无法识别 sass格式的样式代码，因此，根据官方文档的描述，我们还应该安装 sass-loader和node-sass

安装代码：npm install sass-loader node-sass --save-dev
也可以写成:npm install sass-loader node-sass -D

然后，在 webpack 配置文件中去修改代码

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images',
            limit: 8129,
          },
        },
      },
      
      // 在这里修改配置打包 sass 文件的 loader
      {
        // test 表示打包.sass后缀的文件
        test: /\.sass$/, 
        use: [
            'style-loader', 
            'css-loader',
            'sass-loader'
            ],
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.js',
  },
};

==注意!== 在 webpack里，loader的执行是有先后顺序的，顺序为由下到上，由右到左，因此需要使用多个loader的情况下，一定要注意顺序的书写

这个顺序是不能改变的！

有样式需要厂商前缀，该怎么做/(postcss-loader)

有时候我们在写其他 css 样式时，需要厂商前缀，如 -webkit- / -moz- 这些厂商前缀，就需要用到 postcss-loader了

安装命令：npm install --save-dev postcss-loader
也可以写成: npm i -D postcss-loader

安装完毕后创建 index.sass 文件

// 假设我们在里面设置一个transfrom
  .zl {
        width: 150px;
        height: 150px;
        transform: translate(100px,100px);
    }

需要在 webpack.config.js里修改配置

// 上面的代码省略
    {
        test: /\.sass$/,
        use: [
        'style-loader', 
        'css-loader',
        'sass-loader',
        'postcss-loader'
        ],
     },
// 下面的代码也省略

再单独创建一个 postcss.config.js文件

module.exports = {
// 在 plugins 里去引 autoprefixer 
  plugins: [require('autoprefixer')],
};

完成后打包代码并运行，打开 f12 看 Element 下的styles 里的代码，就会发现 样式transform: translate(100px,100px)会多一个厂商前缀。