webpack4 系列教程(七): SCSS提取和懒加载

最新推荐文章于 2021-05-13 16:15:59 发布

心谭

最新推荐文章于 2021-05-13 16:15:59 发布

阅读量1.6k

点赞数 1

分类专栏： webpack 系列教程文章标签： webpack javascript 前端工程化

本文链接：https://blog.csdn.net/AsuraDong/article/details/82290024

版权

本文是webpack4系列教程的一部分，主要讲解如何在项目中进行SCSS的提取和懒加载。内容包括准备工作，如安装对应版本的插件；配置SCSS懒加载的使用；在入口文件中引入懒加载代码；以及打包和引入结果的说明。通过实例展示了如何处理scss文件，以实现按需加载和优化前端性能。

摘要由CSDN通过智能技术生成

教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懒加载。

个人技术小站: https://godbmw.com 有空就来看看, 我一直都在

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。

关于 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"

关注

专栏目录