使用loader处理scss,图片以及转换JS

添加loader

使用loader最好的方式是在webpack.config.js文件中指定它们。要这么做，你需要添加module.rules属性。

css-loader

css-loader能够翻译引入的css文件。

npm install css-loader

考虑如下的配置

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

rules

rules 这个属性是一个数组，指明你的各个loader。它会作用于匹配到 test 属性所指定规则的每一个文件。这个规则，实际上，是一个正则表达式。

use

属性 use 指明需要对匹配的文件应用那个loader。

串联多个loader

有了上面的代码，你就能够在你的JavaScript代码中导入css文件了。（例如，使用之前我们提到的ES6模块）

但这还不能让css真正生效。我们需要一种方法让浏览器能够使用这些css。这种情况下，style-loader就派上用场了。

npm install style-loader

但那就意味着要对css文件使用两个loader。你可以通过串联多个loader(chaining loaders)来使它们都生效。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

你可以看到，我们给了 use 属性一个数组。一个非常重要的注意点是，串联执行的顺序是反向的（译者注：也就是从右往左）。

/* style.css */
body {
  background-color:black;
}

// index.js
import './style.css'

使用上面的配置，打包的工作方式大概是:

1. Webpack尝试解析 style.css 文件