webpack loader配置（五）

loader用于对模块的源代码进行转换。loader可以使你在import或加载模块时预处理文件。loader可以将文件从不同的语言转换为JavaScript，或将内联图像转换为data URL。

配置loader

安装相对应的loader

npm install --save-dev css-loader
npm install --save-dev ts-loader

使用loader的三种方式

1.在webpack.config.js文件中指定loader（推荐）

module.exports = {
  module: {
    rules: [
      { test: /.css$/, use: 'css-loader' },
      { test: /.ts$/, use: 'ts-loader' }
    ]
  }
};

 module.rules允许你在webpack配置中指定多个loader。

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

2.内联：在每个import语句中显式指定loader

import Styles from 'style-loader!css-loader?modules!./styles.css';

可以在import语句或任何等效于"import"的方式中指定loader。使用！将资源中的loader分开。分开的每个部分都相当于当前目录解析

3.CLI：在shell命令中指定它们

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。