Sequel “Surf the Waves learning Webpack”

Summarize the previous Webpack with a diagram:

Code repository address:

Github.com/dandanloveJ…

1. Loader and Plugin

  1. 英 文解释 : a loader is used to load files.

  2. For example, JS loader is used to load JS. CSS loader is used to load CSS by converting advanced JS to low VERSION JS

  3. Plug-ins are used to enhance webpack functions, such as HTMLWebpackPlugin is used to load HTML, miniCssExtractPlugin can merge multiple CSS files into one CSS file

In general, loaders are mainly used to load files, while plug-ins are more versatile

Goal 7: Load SCSS with Webpack

First installation

yarn add --dev dart-sass
yarn add --dev sass-loader
Copy the code

Configuration: Note that the sequence of style-loader, CSS-loader, and sas-loader must be correct; otherwise, an error will be reported

Sass-loader compiles Sass to CSS, CSS-loader converts CSS to JS, and style-loader generates style tags from JS strings

module: {
        rules: [{test: /.s[ac]ss$/i,
                use: [
                  // Creates `style` nodes from JS strings
                    'style-loader'.// Translates CSS into CommonJS
                    'css-loader',
                    {	
                      // Compiles Sass to CSS
                        loader: 'sass-loader'.options: {
                            implementation: require('dart-sass',}}],}]Copy the code

Goal 8: Load less and stylus with webpack

Installation:

yarn add --dev less-loader
yarn add --dev less
Copy the code

configuration

module.exports = {
  module: {
    rules: [{test: /.less$/,
           loader: ['style-loader'.'css-loader'.'less-loader'] // compiles Less to CSS},],}};Copy the code

Installation:

yarn add --dev stylus stylus-loader
Copy the code

configuration

module.exports = {
  module: {
    rules: [{test: /.styl$/,
           loader: ['style-loader'.'css-loader'.'stylus-loader'] // compiles stylus to CSS},],}};Copy the code

Goal 9: Load images with Webpack

Earlier we introduced images using the IMG tag

<img src='.. /.. 1.png'>
Copy the code

So how do you load images with Webpack?

Usage: Use file-loader

Refer to the official documentation: webpack.js.org/guides/asse…

You need to install it first

yarn add --dev file-loader
Copy the code

And then you need to configure

webpack.config.js

module.exports = {
  module: {
    rules: [{test: /.(png|svg|jpg|gif)$/,
            use: ['file-loader',]},],},};Copy the code

Then in index.js, write:

Note that creating a new image tag is

Document. The createElement method (‘ img) is the img!!!!!! Not the image!!!!!!

Or new Image()

import css2 from './y.styl'
import image1 from './assets/cat.jpg'

const div = document.querySelector("#app")  // Select a div element that is already in index.html
const myimage = newCreate a new myimage.src = image1 div.appendChild(myimage)Copy the code

Then yarn Start and you can see the image in the generated page

Goal 10: Lazy loading with Webpack

How to implement a lazy load

  1. Write loaded files with import parentheses
  2. And then you get a promise
  1. Promise.then () has two functions. The first function says what to do if execution succeeds, and the second function says what to do if execution fails

For example:

First we prepare a lazy.js:

export default function lazy(){
    console.log('I'm a lazy module')}Copy the code

Then in index.js, write:

button.onclick = () = >{
    const promise = import('./lazy')
    promise.then((module) = >{
        let fn = module.default
        fn()
        Module.default ()
    }, () = >{
        console.log('Load failed')})}Copy the code

The following image records what happens to the network request and console when we click the ‘lazy load’ button

This article is originally published by FJL. The copyright of this article belongs to me and Hungry People Valley