concept

Essentially, WebPack is a static module packaging tool for modern JavaScript applications. When WebPack processes an application, it internally builds a Dependency graph from one or more entry points, and then assembles each module you need in your project into one or more bundles, which are static resources for displaying your content.

The installation

NPM install webpack webpack-cli –global

NPM install webpack webpack-cli –save-dev

NPM uninstall webpack webpack-cli –global

Note: Local installation is recommended for general projects

configuration

The first step: Create a SRC folder in the root directory of the project, create an index.js and main.js folder, open the 01-webpack folder in the terminal, execute NPX webpack, and by default generate a dist file. There is a main.js file underneath the dist file, and here is the packaged file.

Step 2: Create a webpack.config.js file in the current directory to configure the webPack configuration items and expose a module object using module.exports. Common configuration items are as follows:

    const path = require("path");
    module.exports = {
        entry: "./src/index.js".// The entry path of the file that needs to be packaged
        output: {
            filename: "bundle.js".// The name of the packaged file
            path: path.resolve(__dirname, "./dist"), // The output path of the packaged file
        },
        mode: "none"};Copy the code

Step 3: Use the htMl-webpack-plugin to generate the packaged HTML file. (NPM install html-webpack-plugin -d) and add clean:true to output to clean up the excess JS and HTML files in dist.

    const path = require("path");
    const htmlWebpackPlugin = require('html-webpack-plugin') / / introduction
    module.exports = {
        entry: "./src/index.js".// The entry path of the file that needs to be packaged
        output: {
            filename: "bundle.js".// The name of the packaged file
            path: path.resolve(__dirname, "./dist"), // The output path of the packaged file
            clean:true.// Clean up the js and HTML files left over from the last package
        },
        mode: "none".plugins: [// Configure the packaged HTML file
            new htmlWebpackPlugin({
                template:'./index.html'.// Specify the HTML template to use before packaging
                filename:'app.html'.// The packaged HTML file name
                inject:'body' // This refers to the location where the packaged script tag is added}})];Copy the code

Step 4: To implement real-time update, first set mode to development, then set devtool to inline-source-map, and finally use NPX webpack Watch to update the packaged file in real time. Before modifying the packaged file, the packaged file will be updated in real time. However, the browser will be updated only when it needs to be refreshed. At this time, the plug-in of Webpack-dev-server can realize the real-time refresh of the browser. (Installed before use => NPM install webpack-dev-server -d), run the NPX webpack-dev-server command to start the project and implement real-time update.

    const path = require("path");
    const htmlWebpackPlugin = require('html-webpack-plugin') / / introduction
    module.exports = {
        entry: "./src/index.js".// The entry path of the file that needs to be packaged
        output: {
            filename: "bundle.js".// The name of the packaged file
            path: path.resolve(__dirname, "./dist"), // The output path of the packaged file
            clean:true.// Clean up the js and HTML files left over from the last package
        },
        plugins: [// Configure the packaged HTML file
        new htmlWebpackPlugin({
            template:'./index.html'.// Specify the HTML template to use before packaging
            filename:'app.html'.// The packaged HTML file name
            inject:'body' // This refers to the location where the packaged script tag is added})].mode: "development".// Set mode to the development environment
        devtool:'inline-source-map'.// You can debug code for packaged files
        devServer: {static:'./dist'}};Copy the code