教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载。
个人技术小站: https://godbmw.com
有空就来看看, 我一直都在
本节课讲解在
webpack v4
中的 SCSS 提取和懒加载。值得一提的是,v4
和v3
在 Scss 的懒加载上的处理方法有着巨大差别。
1. 准备工作
关于 SCSS 处理的基础,请参考webpack4 系列教程(六): 处理 SCSS。
本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。
下图展示了这次的目录代码结构:
为了实现 SCSS 懒加载,我们使用了extract-text-webpack-plugin
插件。
需要注意,在安装插件的时候,应该安装针对v4
版本的extract-text-webpack-plugin
。npm 运行如下命令:npm install --save-dev extract-text-webpack-plugin@next
其余配置,与第六课相似。package.json
配置如下:
{
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.2"