webpack 相关 loaders

使用loader来处理文件，loader是一个导出为function的node模块。可以将匹配到的文件进行一次转换，同时loader可以链式传递。
loader的加载顺序是从右往左。

module.exports = {
  module: {
    rules: [
        {
          test: /\.scss$/,
          use:[
              {loader:'style-loader'},
              {loader:'css-loader',options:{sourceMap:true,modules:true}},
              {loader:'sass-loader',options:{sourceMap:true}}
          ],
          exclude:/node_modules/
      }
    ]
  }
}

webpack 常用loader，不断完善中……

一、样式相关

1. css-loader

👉 css-loader会处理 import / require（） @import / url 引入的内容。

image.png

2.style-loader

👉 style-loader把css转换成脚本加载的JavaScript代码, 用于将打包后的css代码<style>标签形式添加到页面头部，
(我们没用到)

options: {
        insert: 'top'  //选择插入标签的地方
    }

{test:/.css$/, use: ['style-loader', 'css-loader']},
先用css-loader将css代码编译，再交给style-loader插入到网页里面去。

3. sass-loader

👉 把scss转成css

4. postcss-loader 自动添加前缀

二、js相关

1. script-loader : 在全局上下文中执行一次javascript文件，不需要解析

2. babel-loader : 加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析

3. to-string-loader

👉返回内容格式为string的文件

4. typescript-loader : 加载Typescript脚本文件

三、文件相关

1. file-loader

👉 装载jpg、png、gif图片或字体文件的loader

2. url-loader

可以配置limit，当打包图片小于某个值时，则将其直接打包成base64

options: {
                        limit: 8*1024, //如果小于8KB，那么将直接转为Base64编码
                        ...
                    },

3.tslint-loader

👉 装载typescript的loader
options: {
configFile: '配置文件地址'
}
https://www.cnblogs.com/xhy-steve/p/6591426.html

四、编写loader

如何自定义编写loader: 戳这里➡️how to write a loader