SOURCE

//npm install --save-dev css-loader ts-loader
////指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};



//在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

<h1>Loader</h1>
<ul>
	<li><i style="color:red">loader 用于对模块的源代码进行转换。</i>
        loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。
        因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。
        loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。
        loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！
    </li>
    <li>使用方式：配置方式、内联方式</li>
</ul>
<strong style="color:red">配置方式</strong>
<p>moudle：Object</p>
<p><span class="nbsp1"></span>noParse:如果第三方模快没有依赖其他第三方，可以将属性添加加快构建。</p>

<p><span class="nbsp1"></span>rules：Array</p>
<p><span class="nbsp2"></span>Rule：Object</p>
<p><span class="nbsp3"></span>exclude：RegExp</p>
<p><span class="nbsp3"></span>include：RegExp</p>
<p><span class="nbsp3"></span>test：RegExp</p>
<p><span class="nbsp3"></span>use：Array</p>
<p><span class="nbsp4"></span>loadeObject：Object</p>
<p><span class="nbsp5"></span>loader：String，loader名字</p>
<p><span class="nbsp5"></span>options：Object，loader配置属性，具体查看使用loader官网</p>
<strong style="color:red">内联方式</strong>
<p>可读性差，难配置。忽略</p>
<strong style="color:red">loader小知识</strong>
<ul>
    <li>loader内联配置难懂</li>
	<li>webpack将每一个文件看成module，所有webpack使用modlue对象来设置loader属性。</li>
    <li>loader配置也就有兼容配置方式，但是这些兼容方式在我看来已经没有必要了。</li>
    <li>loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。</li>
     <li>模块上下文(Module Contexts):避免使用这些选项，因为它们 已废弃，并将很快删除。</li>
</ul>

.nbsp1{
    display: inline-block;
    width: 30px
}
.nbsp2{
    display: inline-block;
    width: 60px
}
.nbsp3{
    display: inline-block;
    width: 90px
}
.nbsp4{
    display: inline-block;
    width: 120px
}
.nbsp5{
    display: inline-block;
    width: 150px
}
.nbsp6{
    display: inline-block;
    width: 180px
}