剧场模式
首页前端Webpackwebpack 3 零基础入门视频教程

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

求知小风 · 元婴发布于
3

1. 什么是 loader

官方的解释是这样的:

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

可能会一脸懵懂吧。

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

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

2. 用 css-loaderstyle-loader 处理 CSS

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

先准备好内容。

src/app.css

body {
  background: pink;
}

src/app.js

import css from './app.css';

console.log("hello world");

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

意思就是说,默认情况下,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

先说这么多吧。

7 条回复
官方服务号
随机课程
TypeORM 从入门到自制 Web 框架实战视频教程

TypeORM 从入门到自制 Web 框架实战视频教程

37 个视频5 小时 18 分钟高级

Pro¥ 158.00¥ 126.40

TypeScript已完结新课程

学员(26)
zhufellx · 真仙钮乾坤 · 大乘太阳 · 元婴奥特曼🤖 · 元婴袁勇 · 元婴小杰 · 化神cooltan · 太乙toutou · 元婴kaixuan1992 · 元婴dear°学会微笑 · 元婴DMAlexL · 合体React-小白 · 合体
最新动态
zhufellx · 真仙学习到了0:24
钮乾坤 · 大乘学习到了12:21
太阳 · 元婴学习到了12:26
奥特曼🤖 · 元婴学习到了13:25
袁勇 · 元婴学习到了13:25
统计信息
    学员: 17772
    视频数量: 1048
    帖子数量: 427

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:120

Top