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

posted @ 2019-08-21 15:55  瑞瑞大人  阅读(525)  评论(0编辑  收藏  举报