webpack packaging and use

md creates a folder dir is to traverse
How to install the node environment First download the installation package; after installation, use the cmd command to create a new folder (must be in English), and then cd into the cmd command to enter the address of the installed disk. 
Use the npm command ( npm install -g webpack ) under this folder to download the file 
and then download ( npm install webpack ) then ( npm install -g webpack-cli ) 
then ( npm install webpack- cli ) after installation. mkdir create folder
Use module.exports = function (){} (representing a module) to create an app folder, and use (type nul> 2.js) to create js files.
Create a public folder. Put the written html file under this file. Create a webpack.config.js. Write the following code in the js file.

module.exports = {
entry: __dirname + "/app/main.js", // the only entry file that has been mentioned many times 
    output: {
    path: __dirname + "/public", // where the packaged files are stored 
    filename: "bundle.js" // filename of the packaged output files 
    }
}
Enter webpack on the command line to package it.
npm init means that the initialization can be confirmed directly or set by yourself.
Be sure to create a package file. Then write a ( "start":"webpack" ) in the scrpit tag of the file;
The packaging function can then be run using npm start. If the input in the tag is not start, then you need to write an npm run input.

Type npm install webpack -dev-server on the command line ( create a local server) and enter the server code.

module.exports = {
entry: __dirname + "/app/main.js", // the only entry file that has been mentioned many times 
    output: {
    path: __dirname + "/public", // Where the packaged file is stored 
    filename: "bundle.js" // The filename of the packaged output file 
    },
    devServer:
    contentBase: "./public", // The directory where the page loaded by the local server is located 
    historyApiFallback: true , // No jumping 
    inline: true // Refresh in real time 
    }
}
Write in the script tag of package.json ( "server": "webpack-dev-server --open" );
Then type npm run server on the command line.
The default port is 8080. If 8080 is occupied, the port will be automatically changed to 8081. Of course, the port can also be in
Modify it yourself in webpack.config.js: in the devServer.
set port is port
The automatic refresh here does not regenerate the public /bundle.js file. Just
 modify the content of bundle.js when using port 8088. So after the code is successfully debugged, you need to run the command line
ctrl + c to kill the server, then npm start to repackage the files.
Loaders
In the webpack.config.js file, enter the code:
module: {
    rules: [
            {
                test: /(\.jsx|\.js)$/, // Regular: files with extension .jsx or .js 
            use: {   // jsx and js files, use this rule to execute Compile (es6 to es5) 
                    loader: "babel-loader",   // Loaded program 
                    options: {   // Option 
                            presets: [ // Preset , the most used is to parse Es6's babel-env- 
                                        preset package and Parse JSX's babel-preset- react package
                                         "env", "react"
                                    ]
                        }
            },
            exclude: /node_modules/   // Exclude this directory 
        }
    ]
}