webpack学习(二)--loader

loader的作用

用来将webpack无法处理的东西。转换成webpack可以处理的东西，webpack理论上只可以处理js的语言。

• test:loader用来处理哪些文件，这个部分一般使用正则来表示
• use：将满足的条件进行转换的时候，使用的是哪个loader

  module: {
    rules: [
      {
        test: /\.(jpg|png)$/, // 用正则标识对哪些文件进行处理
        use: {
          loader: 'file-loader', // 对于满足正则的文件使用什么loader，这个loader需要通过npm 进行安装
          options: {
            // placeholder 占位符
            name: '[name].[ext]', // 以相同的文件名和后缀进行打包
            outputPath: 'images/'
          }
        }
      },
      {
        test: /\.scss$/, // 用正则标识对哪些文件进行处理,正则对满足.scss结尾的文件执行下面的loader
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ] // loader 的执行顺序是从下到上，从右到左
      }
    ]
  },

那么对于打包来说，究竟是什么样的流程呢？

• npm run bundle // 或是npx webpack 执行这一命令
• 找到webpack.config.js配置项，根据配置项来进行打包，如果没有这个文件，会执行默认的参数进行打包
• 在打包的过程中，遇到js文件会直接进行打包，但是遇到其他类型的文件，如jpg文件，会查询配置文件，然后根据配置文件的参数，使用固定的loader进行打包
• 如遇到jpg，就会使用file-loader进行打包

那么file-loader究竟做什么了？

• 发现了引入了图片
• 将图移动到指定的目录下
• 移动后，获取到新的文件的名字
• 将名称返回给引入模块的变量之中

其实url-loader和file-loader功能很相似，就是多了一个limit参数，我们可以设置这个参数，来决定什么时候用url-loader

样式的打包

流程：

• 引入了一个css文件
• 需要先要安装 css-loader和style-loader
• 遇到css文件就会去使用css-loader和style-loader进行打包
• 把样式文档放在指定的文件中

css-loader：分析几个css文件之间的关系，并将几个css文件合并成一个css文件中
style-loader：将css-loader合并的css文件挂载在指定文件的header上面

我们如果配饰了sass-loader或是less-loader的话，我们一般需要配置importLoaders：2,因为执行顺序是从下到上，从右到左，所以一点引入的less文件里面再次引入less文件会导致，打包可能不在走之前的sass-loader, postcss-loader,我们配置importLoaders：2就是为了规避这个问题