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

时间 2019-11-08

标签 webpack 零基础入门教程使用 loader 处理 css sass 栏目 CSS 繁體版

原文原文链接

1. 什么是 loader

官方的解释是这样的：javascript

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

可能会一脸懵懂吧。html

说白了，就是 loader 相似于 task，可以处理文件，好比把 Scss 转成 CSS，TypeScript 转成 JavaScript 等。前端

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

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

如今咱们来演示一下如何用 loader 来处理 CSS 文件。node

先准备好内容。webpack

src/app.cssgit

body { background: pink; }

src/app.jsgithub

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

若是你如今运行 npm run dev 或 webpack 命令，就会出现相似下面的提示错误。web

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

先说这么多吧。