Home > Developer > Web Develop
The picture shown in the tutorial is a github warehouse image, a friend with a slow speed, please visit >>> (original) Webpack4 series tutorial (vii): SCSS extract and lazy loading.
Personal Technology Station: https://godbmw.com come and see me when you are free.
This lesson explains the
webpack v4SCSS extraction and lazy loading in. It is worth mentioning that there is av4v3huge difference between the methods of handling lazy loading on Scss.
>>> the source of this lesson
>>> All courses Source code
1. Preparatory workFor the basics of SCSS processing, refer to the Webpack4 Series tutorial (vi): Handling SCSS.
This lesson mainly deals with the related configuration and plug-in used by SCSS under lazy loading.
This shows the structure of the Directory code:
In order to achieve SCSS lazy loading, we used a extract-text-webpack-plugin plugin.
Note that you should install the v4 version extract-text-webpack-plugin for the plugin when installing it . NPM runs the following command:npm install --save-dev [email protected]
The rest of the configuration is similar to lesson six. The package.json configuration is as follows:
{ "devDependencies": { "css-loader": "^1.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "node-sass": "^4.9.2", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "webpack": "^4.16.0" }}
About the style file under our Scss file base.scss :
// 网站默认背景色：red$bgColor: red !default;*,body { margin: 0; padding: 0;}html { background-color: $bgColor;}
common.scss:
2. Use// 覆盖原来颜色：greenhtml { background-color: green !important;}
ExtractTextPluginTo use extract-text-webpack-plugin , you need to webpack.config.js configure the options in plugins and rules scss the related options in.
webpack.config.js:
const PATH = require ("path"), const Extracttextplugin = require (" Extract-text-webpack-plugin "); module.exports = {entry: {app:"./src/app.js "}, Output: {publicpath: __dirname + "/dist/", Path:path.resolve (__dirname, "dist"), FileName: "[name].bundle.js", Chunkfilename: "[name].chunk.js" }, module: {rules: [{test:/\.scss$/, Use:ExtractTextPlugin.extract ({//NOTE 1 Fallback: {loader: "Style-loader"}, use: [{loader: "Css-loader ", Options: {minimize:true}}, {loader:" s Ass-loader "}]})}]}, plugins: [New Extracttextplugin ({filename:" [Name ].min.css ", Allchunks:false//NOTE 2})]};
In the configuration, note the configuration items in 1 for the callback LOADER that css scss should be used for styles that are not extracted as separate files. style-loaderembed the Web page code with SCSS, even if it is processed into CSS.
Note that the 2 allChunks must be specified as false . Otherwise, it will include the asynchronous loaded css!
SCSSIn the project portal file app.js , for scss lazy loading, you need to introduce the following configuration code:
import "style-loader/lib/addStyles";import "css-loader/lib/css-base";
The rest of us first set the background color to red, after the user clicks the mouse, lazy loading common.scss , the background color turns green. The remaining code is as follows:
4. Packaging and introductionimport "./scss/base.scss";var loaded = false;window.addEventListener("click", function() { if (!loaded) { import(/* webpackChunkName: 'style'*/ "./scss/common.scss").then(_ => { // chunk-name : style console.log("Change bg-color of html"); loaded = true; }); }});
According to our app.js configuration in webpackChunkName , we can guess that there are: files in the package results style.chunk.js .
After the command line is webpack packaged, /dist/ the packaging results in the catalog are as follows:
Finally, we need to introduce the non-lazy-loaded style ( /dist/app.min.css ) and JS file () in the HTML code to the package results /dist/app.bundle.js .
<!DOCTYPE html>
End
WEBPACK4 Series Tutorial (vii): SCSS Extract and lazy loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
