世界上最伟大的投资就是投资自己的教育

Webpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass

1. 什么是 loader

官方的解释是这样的：

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中 “任务 (task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

可能会一脸懵懂吧。

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

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

2. 用 css-loader 和 style-loader 处理 CSS

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

先准备好内容。

src/app.css

body {
  background: pink;
}

src/app.js

import css from './app.css';

console.log("hello world");

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

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

我们来处理这个问题。

$ npm install --save-dev css-loader style-loader

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

我们来看下效果：

dist/index.html

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

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

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

3. 用 sass-loader 把 SASS 编译成 CSS

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

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

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

src/app.scss

body {
  background: pink;
  p {
    color: red;
  }
}

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>hello world</p>
</body>
</html>

src/app.js

import css from './app.scss';

console.log("hello world");

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

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

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ]
      }
    ]
  }
};

效果如下：

4. 用 extract-text-webpack-plugin 把 CSS 分离成文件

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

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

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
    }),
    new ExtractTextPlugin('style.css')
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  }
};

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

dist/style.css

body {
  background: pink; }
  body p {
    color: red; }

dist/index.html

先说这么多吧。

课程目录

03:521FreeWebpack 3 零基础入门视频教程 #1 - 介绍

03:382FreeWebpack 3 零基础入门视频教程 #2 - 安装

07:373FreeWebpack 3 零基础入门视频教程 #3 - 实现 hello world

03:414FreeWebpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js

11:095FreeWebpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin

12:51FreeWebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass

06:247FreeWebpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server

05:098FreeWebpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境

05:079FreeWebpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件

06:3810FreeWebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件

04:0911FreeWebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板

07:5312FreeWebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS

06:3313FreeWebpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境

10:2114FreeWebpack 3 零基础入门视频教程 #14 - 如何打包图片

学员（37）

最新动态

2022-06-09学习到了13:25

2021-12-12学习到了7:30

2021-06-06学习到了0:04

2021-05-10学习到了0:13

2021-03-24学习到了12:16

2021-03-10学习到了0:07

2021-02-04学习到了13:25

2020-11-11学习到了13:19

2020-09-23学习到了13:25

2020-08-31学习到了13:25

2020-08-04学习到了13:25

2020-06-28学习到了0:24

2020-05-23学习到了12:21

2020-04-28学习到了12:26

2020-04-14学习到了13:25

2020-02-20学习到了13:25

2020-01-04学习到了13:25

2019-12-21学习到了0:04

2019-12-19学习到了13:25

2019-12-08学习到了0:06

2019-11-09学习到了13:25

2019-10-08学习到了2:40

2019-09-07学习到了13:21

2019-08-29学习到了13:25

2019-08-10学习到了13:25

2019-07-28学习到了13:19

2019-07-16学习到了0:27

2019-07-15学习到了0:10

2019-06-26学习到了12:01

2019-06-24学习到了12:54

2019-05-29学习到了13:25

2019-05-21学习到了13:25

2019-05-08学习到了13:25

2019-05-02学习到了13:14

2019-04-08学习到了13:25

2019-04-04学习到了13:23

2019-03-28学习到了13:25

7 条回复

spiderman · 凡人 #1 2018-02-05

node-sass 安装报错。请问怎么解决，是因为我的是 window 系统吗？
XIONGXIN535 · 凡人 #2 2018-02-08

gyp ERR! 同报错
随风 · 练气 #3 2018-02-10

参考一下这个 https://github.com/lmk123/blog/issues/28
Goodv · 凡人 #4 2018-02-28

被墙了，cnpm
随风 · 练气 #5 2018-03-04

呵呵，感谢党
18516776220 · 凡人 #6 2019-01-15

extract-text-webpack-plugin 安装之后报错，是因为版本不兼容吗？我的 webpack 是 4，extract-text-webpack-plugin 是 3，但是我把这个插件注释掉还是报错
随风 · 练气 #7 2019-01-15

对 18516776220 · 凡人 #10 回复

extract-text-webpack-plugin 安装之后报错，是因为版本不兼容吗？我的 webpack 是 4，extract-text-webpack-plugin 是 3，但是我把这个插件注释掉还是报错

看第四版本的课程，3 没人用了，过期了在 4 的版本中，extract-text-webpack-plugin 要用别的，这个只适合 3