Global install first:

npm i webpack webpack-cli -g

Initialize in working folder

npm init -y

A package.json file will appear

Create a new configuration file in the working folder root, js format

webpack.config.js

Write in configuration file

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');  //Auto import plug-in
module.exports = {
mode:"development", //development environment 
//Entrance
entry:path.join(__dirname,'./src/main.js'),
 /*Exit*/
    output:{
        path:path.join(__dirname,'./dist'),
        filename:"bundle.js"
    },
/*A plug-in is an array. All plug-ins are required by a constructor */
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"
        })
    ],
//Configuration module
/**************************************************
    *Module, to convert files of other file formats into modules, the corresponding loader is required
     * Different files need different loader s
     * css-loader Converting css files to modules
     * style-loader Insert css module into web document
     * loader The execution sequence is from right to left
    * *************************************************/
module:{
rules:[
        {test:/\.css$/,use['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
//Configure picture support
       {test:/\.(png|jpg|gif|webp|jpeg)$/,
                use:[{
                   loader:"url-loader",
                    options: {
                        limit: 1024,  
                      //Picture less than 1K to best 64
                        // name:'[path][name]-[hash:5].[ext]'
                        name:'[name].[ext]'
                    },
//Configure ES6 to ES5
        {test:/\.js$/,use:['babel-loader'],exclude:[/node_modules/,/dist/]}

  ]
 }
}

Download plug-ins and module collections

npm i html-webpack-plugin -D
npm install sytyle-loader css-loader -D //css support module
npm install less less-loader -D //less support module
npm install url-loader file-loader -D //Picture support module

The module needs to be configured in the configuration file webpack.config.js as shown above

The image module loader will convert the image to best64. If there are many large images, it will consume a lot of memory. Therefore, there is a limit of 1024,

Compatibility handling

Configure ES6 to ES5

npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

There is also another configuration file. babelrc

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}

How do we use it?

Hot update requires downloading a plug-in

npm install webpack-dev-server -D

Now go back to the package.json file configuration

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --port 8888 --hot --open "
  },