Example of WebPack4 SCSS extraction and lazy loading

This section explains SCSS extraction and lazy loading in Webpack V4 . It is worth mentioning that V4 and V3 There is a huge difference in processing methods on SCSS lazy loading.

>>> This section source code

>>> All course source

1. Preparation

About SCSS processing Based, please refer to WebPack4 Processing SCSS.

This section mainly involves the use of SCSS extracted under lazy loading under lazy loading.

The picture shows this directory code structure:

In order to achieve SCSS lazy loading, we use webpack4 SCSS提取和懒加载的示例 extract-text-webpack- Plugin


Need to note that extract-text-webpack-plugin

should be installed when installing the plug-in,

extract-text-webpack-plugin is applied to V4 . NPM runs as follows: npm install –save-dev extract-text-webPack-plugin @ next

The remaining configuration is similar to the sixth lesson.

Package.json The 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 

// Website default background color: Red $ bgcolor: red! Default; *, body {margin: 0; padding: 0;} HTML {Background-Color: $ bgcolor;}

:   // Overweight Color: GreenHtml {Background-Color: Green! Important;} 
2. Use


, need to be
 PLUGINS  option and  of 
RULES are configured in


WebPack .config.js

: const path = Require ("path"); constradTextPlugin = Require ("extract-text-webpack-plugin); module . 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 //, us: extractTextPlugin.extract ({// Note 1 Fallback: {loader: "style-loader"}, us: [{loadinger: "css-loader", Options : {minimize: true}}}, {loader: "Sass-loader"}]}}]}]}]}, plugins: [new extractTextPlugin ({filename: "[name] .min.css", allchunks: false // Note 2 })]}; In the configuration, pay attention to the Callback configuration item in 1, for the separate CSS Document


style should be used by Loader. That is, the Style-Loader is used to process SCSS into CSS embedded web code.

Note 2 in
Allchunks must be indicated as
 FALSE . Otherwise, it will include asynchronous loaded CSS!  3. 
SCSS Quote and lazy loading

In project entrance file app.js , it is necessary to introduce the following configuration code for SCSS: Import "Style-loader / lib / AddStyles "; import" css-loader / lib / css-base ";

Let's set the background color to red, after the user clicks the mouse, lazy loading Common.scss , making the background color becomes green. The remaining code is as follows:

Import “./scss/base.scss”; var loaded = false; window.addeventListener (” click “, function () {if (! Loaded) {Import (/ * WebPackChunkName: ‘style’ * / “./scss/common.scss”).Then (_ => {// chunk-name: style:” Change Bg-color of html ” );}});

4. Packing and introducing

According to us app.js

in the
webpackChunkName configuration, you can guess that there packed result:
 style.chunk.js  file.  After the command line is executed 
WebPack After packaging, the packaging results in the
/ Dist /

directory are as follows:

Finally, we need to htmlIntroducing in the package, non-lazy loading style (
 /dist/app.min.css ) and JS files ( /Dist/app.bundle.js 


The above is all the contents of this article, I hope to help everyone, I hope everyone supports Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment