Tutorial on using Webpack in JavaScript

Tutorial on using Webpack in JavaScript

0. What is Webpack

insert image description here

Webpack is a front-end resource loading/packaging tool. It will perform static analysis based on the module dependencies, and then generate corresponding static resources for these modules according to the specified rules.

1. Use of Webpack

1. Initialize the project

npm init

2. Install the packages required by Webpack

npm install --save-dev webpack-cli webpack

3. Configure Webpack
Add the command to execute the compilation in the package.json file

  "scripts": {
    "webpack": "webpack"
    // Customizable configuration file: "webpack": "webpack --config webpack.js"
  },

4. Create a configuration file (default webpack.config.js) and configure it.

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

5. Package and test

C:\Users\Daixiang\Desktop\demo>npm run webpack

> [email protected] webpack C:\Users\Daixiang\Desktop\demo
> webpack --config webpack.config.js

assetbundle.js 4.34 KiB [compared for emit] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 231 bytes
  ./src/index.js 159 bytes [built] [code generated]
  ./src/Base.js 72 bytes [built] [code generated]
webpack 5.59.1 compiled successfully in 113 ms

2. Core Concepts of Webpack

  • entry specifies the entry file.
  • output specifies output related information.
  • Loaders can help webpack process those non-JavaScript files.
  • Plugins are used to perform a wider range of tasks.

2.1 entry

2.1.1 Single entry

Two ways to write a single entry:

Writing method 1: entry: './src/index.js'

Writing method 2: entry: {main: './src/index.js'}

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    // entry: './src/index.js',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

2.1.2 Multiple Entrances

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    //Multiple entry: {
        main: './src/index.js',
        base: './src/Base.js',
        about: './src/About.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

2.2 output

2.2.1 Output with single input

When there is only one entry, customize the output file name.
webpack.config.js

    output: {
    	// path path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js',
    },

2.2.2 Output with multiple inputs

When there are multiple entries, the file name is output dynamically.
webpack.config.js

    output: {
    	// path path: path.resolve(__dirname, 'dist'),
        // Dynamic output file name filename: '[name].js',
    },

2.3 loader

Loader is a module that allows Webpack to process non-js files.
Loader configuration reference document: https://webpack.docschina.org/loaders/
webpack.config.js

    module: {
        rules:
            {
                // Regular matching file test: /\.js$/,
                // Exclude folder exclude: /node_modules/,
                // Use the specified loader
                loader: 'babel-loader'
            }
        ]
    }

It should be noted that to compile the new API, you need to introduce core-js
1. Install core-js using npm

npm install --save-dev core-js

2. Introduce core-js/stable in the js entry file

import 'core-js/stable';

3. Package and test

npm run webpack

2.4 plugins

Plugins are plugins that are used to perform a wider range of tasks.
Plugins configuration reference document: https://webpack.docschina.org/plugins
Take html-webpack-plugin as an example to install the plug-in.
1. Install html-webpack-plugin using npm

npm install --save-dev html-webpack-plugin

2. Configure the webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()],

webpack.config.js

const path = require('path');
// Import files and define constants const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules:
            {
                // Regular expression matching test: /\.js$/,
                // Exclude folder exclude: /node_modules/,
                // Use the specified loader
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        // Single entry // new HtmlWebpackPlugin(
        // {
        //Specify the template file, and put the generated js and other files into the template file // template: './index.html'
        // }
        // )
        //Multiple entry new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks:['index'],
                minify:
                    // Delete comments removeComments: true,
                    // Remove whitespace removeWhitespace: false,
                    // Remove double quotes from HTML tag attributes removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks:['search']
            }
        )
    ],
};

3. Package and test

npm run webpack

index.html

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <title>index</title>
<script defer=defer src=index.js></script></head>
<body>
</body>
</html>

search.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>search</title>
    </style>
<script defer src="search.js"></script>
</head>
<body>
</body>
</html>

3. Webpack processes CSS files

3.1 <style> tag embedded in HTML

1. Install css-loader to identify css files in js, install style-loader, and embed css files in html

npm install --save-dev css-loader style-loader

2. Configure the webpack.config.js file
webpack.config.js

    module: {
        rules:
            {
                // Regular expression matching test: /\.css$/,
                // Use css-loader to identify css in js, and use style-loader to embed css files in html // Pay attention to the order of the array, use from right to left use: ['style-loader', 'css-loader']
            }
        ]
    },

3. Package and test

npm run webpack

3.2 Introducing HTML in the form of <link> tag

Use css-loader to identify css in js, and use mini-css-extract-plugin to import css files.
1. Install css-loader, mini-css-extract-plugin

npm install --save-dev css-loader mini-css-extract-plugin

2. Configure the webpack.config.js file
webpack.config.js

const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules:
			......
            {
                // Regular expression matching test: /\.css$/,
                // Use css-loader to identify css in js, use MiniCssExtractPlugin.loader to import css files // Pay attention to the order of the array, use from right to left use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3. Package and test

npm run webpack

dist/index.html

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <title>index</title>
    <script defer=defer src=index.js></script>
    <link href=css/index.css rel=stylesheet>
</head>
<body>
</body>
</html>

4. Webpack processes images in CSS

4.1 Use file-loader to process images in CSS

Use file-loader to process images in css. (file-loader is deprecated in v5)
File-loader reference documentation: https://v4.webpack.js.org/loaders/file-loader/
index.css

body{
    background-image: url(./images/3.jpg);
    background-repeat: no-repeat;
}

1. Install file-loader

npm install --save-dev file-loader

2. Configure the webpack.config.js file
webpack.config.js

const path = require('path');
......
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules:
            ......
            {
                // Regular expression matching test: /\.css$/,
                // Use css-loader to identify css in js, and use MiniCssExtractPlugin.loader to import css files // Pay attention to the order of the array, use from right to left use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options:
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // Regular expression matching test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options:
                        name: 'img/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        //Multiple entry new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks: ['index'],
                minify:
                    // Delete comments removeComments: true,
                    // Delete spaces collapseWhitespace: false,
                    // Remove double quotes from HTML tag attributes removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks: ['search']
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3. Package and test

npm run webpack

4.2 Use html-withimg-loader to process images in HTML

1. Install html-withimg-loader

npm install --save-dev html-withimg-loader

2. Configure the webpack.config.js file
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules:
            {
                // Regular expression matching test: /\.js$/,
                // Exclude folder exclude: /node_modules/,
                // Use the specified loader
                loader: 'babel-loader'
            },
            {
                // Regular expression matching test: /\.css$/,
                // Use css-loader to identify css in js, and use MiniCssExtractPlugin.loader to import css files // Pay attention to the order of the array, use from right to left use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options:
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                // Regular expression matching test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options:
                        name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            },
            {
                // Regular expression matching test: /\.(html?)$/,
                loader: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        //Multiple entry new HtmlWebpackPlugin(
            {
                template: './index.html',
                filename: 'index.html',
                chunks: ['index'],
                minify:
                    // Delete comments removeComments: true,
                    // Delete spaces collapseWhitespace: false,
                    // Remove double quotes from HTML tag attributes removeAttributeQuotes: true
                }
            }
        ),
        new HtmlWebpackPlugin(
            {
                template: './search.html',
                filename: 'search.html',
                chunks: ['search']
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename: 'css/[name].css'
            }
        )
    ],
};

3. Package and test

npm run webpack

4.3 Use file-loader to process images in js

index.js

import img from './images/1.jpg';

1. Install file-loader

npm install --save-dev file-loader

2. Configure the webpack.config.js file
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules:
            ......
            {
                // Regular expression matching test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'file-loader',
                    options:
                        name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            }
        ]
    },
};

3. Package and test

npm run webpack

4.4 Use url-loader to process images

index.js

import img from './images/1.jpg';

1. Install url-loader and file-loader

npm install --save-dev url-loader file-loader

2. Configure the webpack.config.js file
webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        search: './src/search.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules:
            ......
            {
                // Regular expression matching test: /\.(jpe?g|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options:
                        name: 'img/[name].[ext]',
                        esModule: false,
                        limit: 10000 // Images smaller than 10k are converted to base64 format}
                }
            }
        ]
    },
};

3. Package and test

npm run webpack

This is the end of this article about the use of Webpack in JavaScript. For more information about the use of JavaScript Webpack, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Use webpack to build pixi.js development environment
  • Detailed explanation of using webpack+electron+reactJs to develop windows desktop applications
  • Solution to packaging errors when using uglifyjs to compress js in webpack3
  • Detailed explanation of how to use webpack to write jsx syntax in vue project
  • Example of using mockjs to simulate backend data in vue+vuecli+webpack
  • React.js Getting Started Tutorial on Using Webpack with Environment

<<:  Docker file storage path, modify port mapping operation mode

>>:  Automatic line breaks in html pre tags

Recommend

HTML CSS3 does not stretch the image display effect

1. Use the transform attribute to display the ima...

jquery+springboot realizes file upload function

This article example shares the specific code of ...

Example of using Dockerfile to build an nginx image

Introduction to Dockerfile Docker can automatical...

Automatic file synchronization between two Linux servers

When server B (172.17.166.11) is powered on or re...

Several mistakes that JavaScript beginners often make

Table of contents Preface Confusing undefined and...

Detailed explanation of reduce fold unfold usage in JS

Table of contents fold (reduce) Using for...of Us...

MySQL 5.7.16 free installation version graphic tutorial under Linux

This article shares the MySQL 5.7.16 free install...

Detailed explanation of the method of comparing dates in MySQL

If there is a table product with a field add_time...

How to solve the mysql insert garbled problem

Problem description: When inserting Chinese chara...

Javascript combined with Vue to achieve automatic path finding for any maze image

Table of contents Preface Two-dimensional array, ...

404 error occurs when accessing the homepage of tomcat started in Docker mode

Scenario: When starting tomcat in docker (version...

An enhanced screenshot and sharing tool for Linux: ScreenCloud

ScreenCloud is a great little app you didn’t even...

Responsive Web Design Learning (3) - How to improve the performance of web pages on mobile devices

Preface Mobile devices have higher requirements f...

XHTML Web Page Tutorial

This article is mainly to let beginners understan...

React Hooks Detailed Explanation

Table of contents What are hooks? Class Component...