Webpack New Project

Record how to build an easy-to-run project!

1. First, you need to download the installation Nodejs environment, you can directly Baidu search Nodejs to download the environment according to your operating system.

After installing Nodejs, enter the command in the console:

Npm-version

If you successfully see the version of Nodejs, then the environment has been successfully installed!

2. New Package.json

Open the Command line tool (CMD) and switch the path to the Webpack project path, my project path is D:\WorkSpace\webpack\testProject1
So I'm typing in cmd.
D://Switch to D-Drive
CD D:\WORKSPACE\WEBPACK\TESTPROJECT3//Switch to project path

Then we use the command
NPM init//Creating a Package.json file
To create a Package.json
I use the default parameters of Package.json, so always enter to confirm.
At the end of is this OK? (yes) enter Y to create the complete Package.json

3. Create a Webpack.config.js file

The Package.json file has just been created by command, and the Webpack.config.js file is created manually
Module.exports = {
Entry: './index.js ',
Output: {
Path: __dirname,
FileName: "Bundle.js"
},
}
Think about why entry is './index.js '
Create a new file, write the above code to the JS file

4. Create a foreground page

Create index.html and Index.js files under the project path root directory
index.html file
<script src= "Bundle.js" ></script>//Think about why Bundle.js is not index.js
Index.js file
document.write ("Hello World")

5.NPM Start Startup Project
Now that the basic project files are available, you are ready to start the project.
To enter commands in the CMD console
NPM start
will find the boot error--npm err! Missing Script:start
This is because the corresponding command is not found in the Package.json file
So you need to add
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1",
"Dev": "Webpack-dev-server--hot--inline",
"Start": "Webpack-dev-server--hot"//Add this piece of code
},

Continue NPM Start
and found an error.
' Webpack-dev-server ' is not an internal or external command, nor is it a running program
This is due to the need to install the Webpack-dev-server module
Enter the command (the module package I installed is installed under global variables)
NPM Install Webpack-dev-server-g

Continue NPM Start
Continue to Error
Error:cannot Find module ' webpack '
This is due to the need to install the Webpack module
Input command
NPM Install Webpack-g

Continue NPM Start
Continue to Error
Error:cannot Find module ' Webpack-cli/bin/config-yargs '
This is due to the need to install the WEBPACK-CLI module
Input command
NPM Install Webpack-cli-g

Continue NPM Start
Continue to error (or may not error)
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server./index.js
In fact, the project has now successfully run up, just loaded JS error
This is due to the need to install the Start-webpack-dev-server-hot module
Input command
NPM Install--save-dev Start-webpack-dev-server-hot

Finally, the project will be successful without error running.
Here, one of the simplest webpack HelloWorld cases is complete!

Webpack New Project