1, Introduction:

1. Module packaging tool for JS application

2, webpack installation

1. Environment: node environment

2. npm install webpack -g

Description: npm install command; Webpack is the tool name, and the version can be specified, such as: webpack@5.58.3 ； - g means global installation. If you don't want global installation and only rely on it during installation and development of a project, you can execute the installation command in the project directory and change - g to -- save dev-- Save indicates the installation of this project- Dev means development time dependency. This option can be added when it is not needed at runtime

Overall case:

npm install webpack@3.6.0 --save-dev

3. webpack --version

Note: check the webpack installation version, and the correct display indicates that the installation is successful. Note: when viewing the version of a higher version of webpack, you will be asked to install a webpack cli

4. npm uninstall webpack -g

Description: remove the webpack tool

3, webpack packaging

1. js file name of webpack entry js file after packaging

Description: webpack is a packaging command; The entry file is the entry of the project, such as main.js; The file name after packaging is the file name generated after successful packaging, such as bundle.js

Overall case:

webpack ./src/main.js ./dist/bundle.js 

Note: for the higher version, you need to add - o as option, followed by the output directory, and the generated file name is main.js;
For example, in version 5.58.3, execute the command webpack. / SRC / main.js - O. / dist / bundle.js to generate the bundle.js directory in the dist directory and the main.js file in the bundle.js directory

2. webpack

Note: after the file configuration by webpack, you can directly use webpack for packaging. Webpack will find the entry file and exit file from the configuration for packaging; File name: webpack.config.js

Configuration method:

module.exports = {
    // entrance
    entry: './src/main.js',
    // Export
    output: {
        // path must be absolute
        path: absolutePath,
        filename: 'bundle.js'　　　　　　　　
    }
} 

Absolute path Relativity: executing the npm init command in the project directory will generate the package.json file. At this time, import the path module into the webpack.config.js configuration file. At this time, find the path package from package.json or the global, and splice the path using the join function in the package

Import module:

const path = require('path') 

Splice absolute path:

path.join(__dirname, 'dist') 

Among them__ ditname is the absolute path to the folder of the current project obtained in node

3. npm run ***

Note: the npm run command can be used to execute script commands. It can be used after the mapping is configured

Establish webpack packaging mapping: add command mapping in scripts in package.json file, such as "build":"webpack"

Execution: after the above mapping is established, you can use npm run build to package and build. The webpack command is executed and the configuration information is used

Note: this packaging method will give priority to the locally installed webpack

4, loader of webpack

1. loader installation

Install the required loader through npm;

2. loader configuration

Configure under the module keyword in webpack.confi.js (go to the official website to find the relevant loader and usage. webpack.js.org)

3. Overall case:

I:

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

II:

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }]
    }　　
}

day stage : 2021 − 10 − 20 \color{#00FF00} {date: 2021-10-20} Date: 2021 − 10 − 20

5, plugin of webpack

1. Install relevant modules

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

2. Import relevant modules

const webpack = require('webpack'); 
const htmlWebpackPlugin = require('html-webpack-plugin')

3. Add to webpack.config.js configuration file

module.exports = {
    // ...
    plugins: [
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template: 'index.html'
        }),
        new webpack.BannerPlugin('Copyright plugin'),
        new uglifyJsPlugin()
    ],
}

6, Development service configuration

1. Install webpack dev server

npm install webpack-dev-server

2. Configure devServer

module.exports = {
    // ...
    devServer: {
        // Directory of services
        static: [
            {
                directory: path.join(__dirname, 'dist')
            },
        ],
        // Real time file
        watchFiles: {
            paths: ['dist/**/*']
        },
        // Specify port
        port: 8081,
        // Open browser on first startup
        open: true,
    }
}

Note: the configuration information of the low version is different from that of the high version. Please pay attention when using

day stage : 2021 − 10 − 21 \color{#00FF00} {date: 2021-10-21} Date: 2021 − 10 − 21