webpack 与 热编译webpack-dev-server

webpack.config.js 只需要注意加大加粗的地方。

var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
　　　　　// 为每个入口都注入代理客户端
        "index":[__dirname+'/src/js/index.js', 'webpack-dev-server/client?http://127.0.0.1:8080']    
    },
    output:{
　　　　　// 配合热编译服务器设置公共资源路径，但编译的时候需要移除。
        publicPath : "http://127.0.0.1:8896/",
        path       : __dirname + '/build/js',
        filename   : '[name].js'
    },
    
    plugins:[
         new HtmlWebpackPlugin({
　　　　　　  // 不能写为这种路径，但编译的时候需要写成这种路径
            // filename : __dirname + "/build/spa.html",
　　　　　　　// 由于热编译启动的服务器，所以设置了publicPath，所以这里需要写为相对路径这样才可以访问localhost:port/spa.html
            filename : "spa.html", 
            template : __dirname + '/src/spa.html',//模板文件
            inject   : 'head',
            hash     : true,
            chunks   : ["app"]
         })
    ]
}

 

package.json

{

  "scripts": {
    "dev": "webpack-dev-server --host 127.0.0.1 --inline --hot  --port 8896"
  },
},

 

命令行执行 npm run dev 测试