可能会一脸懵懂吧。

说白了，就是 类似于 task，能够处理文件，比如把 Scss 转成 CSS，TypeScript 转成 JavaScript 等。

再不明白的话，还是用实例来说明吧。（其实它的概念并不重要，你会用就行）

现在我们来演示一下如何用 loader 来处理 CSS 文件。

先准备好内容。

src/app.css

src/app.js

  1. import css from './app.css';
  3. console.log("hello world");

如果你现在运行 npm run dev 或 webpack 命令，就会出现类似下面的提示错误。

意思就是说，默认情况下，webpack 处理不了 CSS 的东西。

我们来处理这个问题。

  1. $ npm install --save-dev css-loader style-loader
  1. var HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4.   entry: './src/app.js',
  5.   output: {
  6.     path: __dirname + '/dist',
  7.     filename: 'app.bundle.js'
  8.   },
  9.   plugins: [new HtmlWebpackPlugin({
  10.     template: './src/index.html',
  11.     filename: 'index.html',
  12.     minify: {
  13.       collapseWhitespace: true,
  14.     },
  15.     hash: true,
  16.   })],
  17.   module: {
  18.     rules: [
  19.       {
  20.         test: /\.css$/,
  22.     ]
  23.   }
  24. };

我们来看下效果：

dist/index.html

6. 使用 loader 处理 CSS 和 Sass - 图1

编译出的内容跟之前的差不多。

我们用浏览器打开 dist/index.html 文件。

编译出的 app.bundle.js 文件是有包含 CSS 的内容的。

6. 使用 loader 处理 CSS 和 Sass - 图2

应该都知道 SASS 是什么吧，不懂的话可以查一下。

说白了，就是可以用更好的语法来写 CSS，比如用嵌套。看下面的例子应该就会理解的。

把 src/app.css 改名为 src/app.scss

src/app.scss

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Hello World</title>
  6. </head>
  7. <body>
  8.   <p>hello world</p>
  9. </body>
  10. </html>

src/app.js

  1. import css from './app.scss';
  3. console.log("hello world");

安装（中间可能要下载二进制包，要耐心等待）

  1. $ npm install sass-loader node-sass --save-dev

webpack.config.js

效果如下：

有时候我们要把 SASS 或 CSS 处理好后，放到一个 CSS 文件中，用这个插件就可以实现。

  1. $ npm install --save-dev extract-text-webpack-plugin

webpack.config.js

  1. var HtmlWebpackPlugin = require('html-webpack-plugin');
  2. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  4. module.exports = {
  5.   entry: './src/app.js',
  6.   output: {
  7.     path: __dirname + '/dist',
  9.   plugins: [new HtmlWebpackPlugin({
  10.       template: './src/index.html',
  11.       filename: 'index.html',
  12.       minify: {
  13.         collapseWhitespace: true,
  14.       },
  15.       hash: true,
  16.     }),
  17.     new ExtractTextPlugin('style.css')
  18.   ],
  19.   module: {
  20.     rules: [
  21.       {
  22.         test: /\.scss$/,
  23.         use: ExtractTextPlugin.extract({
  24.           fallback: 'style-loader',
  25.           //resolve-url-loader may be chained before sass-loader if necessary
  26.           use: ['css-loader', 'sass-loader']
  27.         })
  28.       }
  29.     ]
  30.   }
  31. };

在 dist 目录下生成了 style.css 文件。

dist/style.css

  1. body {
  2.   background: pink; }
  3.   body p {

dist/index.html

6. 使用 loader 处理 CSS 和 Sass - 图3

先说这么多吧。