After the update is installed on webpack4.0 found with very different 3.X

Wabpack4.0 did not come out before, it has been installed is 3.8, with the use of discovery system update, and then update it again in accordance with the original look and found a variety of problems.

Then fought the day, and finally resolved this morning to share to you I hope you avoid detours

Step 1. Install webpack4.X

First create a new pack.json

npm init -y

 

Sub-global and local, casual themselves that way can

Global Installation

npm i webpack  webpack-cli -g

After 4.0, add cli file you want to install with or will be error

Then run

webpack -v

See the version of the installation is successful

Local installation

npm i webpack  webpack-cli -D

　　After installing the version you can see inside the pack.json

Then enter the root directory where your files, create several files and folders that are dist folder dist / index.html file src folder src / index.js file webpack.config.js

I like this shot

 

Then proceed to the next configuration webpack.config.js

the require htmlPlugin = const ( 'HTML-WebPACK-plugin') 
const = path the require ( 'path') 
module.exports = { 
    MODE: 'Development', there are two parameters // Development (development, bulky, uncompressed) production (production, small) 
    entry: path.join (__ dirname, '/ the src / The index.js.'), 
    Output: { 
        path: path.join (__ dirname, './dist'), 
        filename: 'main.js '// do not write here write path export files directly on the line 
    }, 
    plugins: [ 
        new new htmlPlugin ({ 
            Template:' ./dist/index.html'// only increased this line 
        }) 
    ] 
    // devserver: { 
    // open: true, // automatically open the browser 
    // port: 3000, // set the start port 
    // contentBase: 'src', // root directory of the specified managed 
    // hot:true, // update first step to enable heat

    // }
}

Here you can run directly webpack

Webpack-dev-server configuration

run

npm i webpack-dev-server  -D

　Open pack.json, find scripts command, add

 "dev": "webpack-dev-server --mode development --open --hot "

　　

Start the server running npm run dev

　　Configuring html-webpack-plugin 

Run npm i html-webpack-plugin -S

　　Then installed the configuration webpack.json

plugins: [ 
        new new htmlPlugin ({ 
            Template: 'line ./dist/index.html'// only increased 
        }) 
    ]

　　Then restart the server can,

At this point the installation completed.