Three minutes using Webpack-dev-sever to build a server

Webpack-dev-server is a small Node.js Express server, we can build a local server, and implement file hot update;

1. Switch to your directory to initialize the project

After a enter,yes we will get Package.json file (Ps:json can not write comments, do not copy the past directly with AO!)

{  "Name": "Webpack_demo", //project name "Version": "1.0.0", //version number "description": "", //Description "Main": "Index.js", //import file "Scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1",}, //custom command (that is, npm run XXX, etc.) "keywords": [],//keywords, easy for users to search our project "Author": "",//author "License": "ISC"//Open Source license}

2. Installing Webpack

NPM Install Webpack--save-dev

Knocking on the blackboard!!!

Why use--save-dev instead of--save?

--save will add the dependency package name to the Package.json file dependencies;

--save-dev is added to the Package.json file Devdependencies key;

Example:

"Dependencies": {    "vue": "^2.2.1"  },  "Devdependencies": {"Vue-loader": "^ 11.1.4 ",    " Vue-template-compiler ":" ^2.2.1 ",    " Webpack ":" ^2.2.0 ",    "Webpack-dev-server": "^2.2.0"  }}

But that's just their superficial difference. The real difference is that NPM's own documentation says dependencies is run-time dependent, and devdependencies is a development-time dependency. That is, devdependencies the modules listed below are used in our development, such as when we install JS compression Package gulp-uglify, we use "NPM install–save-dev gulp-uglify" command installation, Because we do not use it after the release, but only in our development to use it. The modules under dependencies are the modules that we need to rely on after we release them, like the jquery library or the angular framework, and we'll definitely rely on them after development, otherwise it won't work.

Another thing to add:
When using NPM install normally, the modules in dependencies and devdependencies are downloaded, and when using NPM install–production or noting the node_env variable value production, Only the modules in the dependencies are downloaded.

Webpack after the installation is successful, your JSON file is like this

{  "name": "Webpack_demo",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "Scripts": {    "test": "Echo \" Error:no Test specified\ "& & Exit 1 ",    " dev ":" Webpack-dev-server--env development "  },  " keywords " : [],  " Author ":",  "license": "ISC",  "Devdependencies": {    "webpack": "^ 3.10.0 "  }}

3. Installing Webpack-dev-server

NPM Install Webpack-dev-server--save-dev

After the installation is successful, you can see the dependent files come out one more

"Devdependencies": {    "webpack": "^3.10.0",    "webpack-dev-server": "^2.9.7"   }

Install here to the end, then start configuring,

New Webpack.config.js to configure Webpack

Create a new build folder as an input location

New SRC folder to store the entry file,

Create index.js first in SRC

var el = document.getElementById (' app '= ' I'm going to change you! ';

Create the Assets folder as the path to the specified resource file reference (it is important to implement the refresh)

The project structure is as follows:

4. Configure Webpack.config.js

Const PATH = require (' Path '//node module = {  entry: {    app: ["./src/index.js"//Portal file   }, Output  : {    "build"),//outputs position    Publicpath: "/assets/",//  Specifies the directory referenced by the resource file    filename: "bundle.js"//input file   }}

New index.html introduced Asset/bundle.js, you do not see this bundle.js in the local, it actually exists in memory, want to see the compiled code can go to build under the search

</body>
Ok actually now we can run Webpack-dev-sever, he has been able to work normally, but it is troublesome to knock at the command every time, so we add a custom command to him in Package.json.
 { "name": "Webpack_demo"  "version": "1.0.0"  "description": ", " main ":" Index.js " "scripts" : { "test": "Echo \" Error:no Test specified\ "&& exit 1"   "Dev" : "Webpack-dev-server--env Development"//This is the sentence--env   development means that the developer environment 
"keywords""author": """" "" "License": "ISC" "Devdependencies" "Webpack": "^3.10.0"  "dependencies""Webpack-dev-server": "^2.9.7" }}
Command add complete, we can run the project through NPM run Dev, used vue-cli classmate, there is no very familiar feeling, haha
The default port number is 8080, but also manually to modify the port number, how to change it does not say the super simple, check the web has a detailed tutorial
This is the time to prove success, on the Web page opened http://localhost:8080 can see the page,
This time let's change index.js and see what happens.
var el = document.getElementById (' app '= ' I've been changed! ';
Ctrl+s save, switch back to the browser without refreshing, look at the page word is not changed;
Get it done!
Three minutes using Webpack-dev-sever to build a server