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

Source: Internet
Author: User
Tags jquery library

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;


"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


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.