Webpack with hot compilation webpack-dev-server

Why do I find that every time I build a hot compilation is different, but this time should be considered the most scientific way.

webpack.config.js only need to pay attention to increase the thickness of the place. This is the core, and the rest is just a demonstration of the actual situation.

varWebpack = require ("Webpack");varHtmlwebpackplugin = require (' Html-webpack-plugin ')); Module.exports={entry:{JQ: [__dirname+ '/src/js/jq/jquery-1.9.1.js ', __dirname+ '/src/js/jq/jquery.urianchor-1.1.3.js '], app: [__dirname+ '/src/js/spa.js ', __dirname+ '/src/js/spa.shell.js ', __dirname+ '/src/js/spa.util.js ', __dirname+ '/src/js/spa.chat.js ', __dirname+ '/src/js/spa.model.js ',               ' webpack-dev-server/client?http://127.0.0.1:8896 ']}, output:{ publicpath: "http://127.0.0.1:8896/" , path: __dirname+ '/build/js ', FileName:' [Name].js '}, Resolve: {alias: {css: __dirname+ '/src/css/'}}, module: {loaders: [{test:/\. (EOT|WOFF|WOFF2|SVG|TTF) ([\?]?. *) $/,loader: "File"}, {test:/\.css$/,loader: ' Style-loader!css-loader '}, {test:/\. (png|jpe?g|gif|svg) (\?\s*)? $/,loader: ' File-loader ', query: {name: ' [name].[ EXT]? [Hash] '}}]}, plugins:[NewHtmlwebpackplugin ({//FileName: __dirname + "/build/spa.html",//user background home            filename: "spa.html", //  with hot compilation intentionally written so that you can access the localhost:port/spa.html Template: __dirname + '/src/spa.html ',//template fileInject: ' Head ', Hash:true, chunks: ["JQ", "app", ' common ']         }),         //Extract the public code        NewWebpack.optimize.CommonsChunkPlugin ({name:"Common", chunks:["JQ", "app"]        })    ]}

Package.json also only need to pay attention to the bold and enlarged areas

{  "Name": "Test_spa",  "Version": "1.0.0",  "description": "",  "Main": "Index.js",  "Scripts": { "dev": "Webpack-dev-server--host 127.0.0.1--port 8896" }, "Repository": {    ' type ': ' Git ',    "url": "Git+https://github.com/dragon8github/spa.git"  },  "Author": "",  "License": "ISC",  "Bugs": {    "url": "Https://github.com/dragon8github/spa/issues"  },  "Homepage": "Https://github.com/dragon8github/spa#readme",  "Devdependencies": {    "Babel-cli": "^6.23.0",    "Babel-loader": "^6.3.1",    "babel-preset-es2015": "^6.22.0",    "Css-loader": "^0.26.1",    "Html-webpack-plugin": "^2.28.0",    "jquery": "^1.9.1",    "Style-loader": "^0.13.1",    "Url-loader": "^0.5.7",    "Webpack": "^2.2.1",    "Webpack-dev-server": "^2.3.0"  }}

Command line execute NPM run dev test

Webpack with hot compilation webpack-dev-server