Webpack loaders使用

Loaders

文档地址
Loaders是一种转换器。将一种文件转换成另外一种。

示例

让webpack将CSS或TypeScript转换成javaScript.

1. 安装loader

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

2. 配置webpack.config.js，
   使用css-loader处理.css文件。
   使用ts-loader处理.ts文件。

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

loader可以通过其他方式进行配置。

{test: /\.css$/, loader: 'css-loader'}
// or equivalently
{test: /\.css$/, use: 'css-loader'}
// or equivalently
{test: /\.css$/, use: {
  loader: 'css-loader',
  options: {}
}}

Configuration

可以通过三种方式添加loader。

• 通过configuration

• 通过require关键字

• 通过CLI

• webpack.config.js
  module.rules允许在配置多个loader.
  使用这种方式进行配置，可以让代码变得简洁。
  而且可以对使用的loader有整体的监控。

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

• require
  能够通过require,define,require.ensure指定loader的使用。
  将loaders使用!分割，每个部分都会使用当前目录进行依赖查找。

require('style-loader!css-loader?modules!./styles.css');

通过这种方式进行loader设置，会覆盖通过配置文件设置的方式。
通过该方式进行设置，也可以传递参数,参数类似于web(?key=value&foo=bar)，
也可以传递JSON对象(?{"key":"value","foo":"bar"})

最好使用配置的方式进行设置，可以减少代码中的处理，并且使用配置的形式会让debug速度更快

• CLI
  使用命令行传参

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

上面的示例使用了jade-loader处理.jade文件，style-loader和css-loader处理.css文件。

Loader Features

Resolving Loaders