webpack.config.js

var path = require('path');module.exports = {  entry: {    index:'./js/components/index'  },  externals: [{    'react-dom':'ReactDOM',    'react':'React'  }],  output: {    path:path.resolve(__dirname,'js/components'),    filename: 'bundle.js'  },  module: {    loaders:[    {      test: /\.js[x]?$/,      include: path.resolve(__dirname, 'js/components'),      loader: 'babel',      query: {        presets: ['es2015','react']      }    },    ]  },  resolve: {    extensions: ['', '.js', '.jsx'],    alias:[    {'react-dom':'./libs/react-dom.js','react':'./libs/react.js'}    ]  }};

1.html

...            

不修改配置文件(推荐)

Iframe mode

• 运行webpack-dev-server

• 浏览器打开http://localhost:8080/webpack-dev-server/1.html

Inline mode

• 在1.html中添加

  <script src="http://localhost:8080/webpack-dev-server.js"></script>

• 运行webpack-dev-server

• 浏览器打开http://localhost:8080/1.html

修改配置文件

webpack.config.js

...module.exports = {  entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080','./js/components/index'],  ...  plugins: [  new webpack.HotModuleReplacementPlugin()  ]};

• 运行webpack-dev-server,不用添加官网上说的--inline --hot参数

• 浏览器打开http://localhost:8080/1.html

这种方式的缺点:

• 会生成多余的js,json文件，并且只能手动删除

• 配置文件中的entry只能为数组，不能用于多个入口的情况

...    entry: {        a: "./a",        b: "./b",        c: ["./c", "./d"]    },    output: {        path: path.join(__dirname, "dist"),        filename: "[name].entry.js"    }    ...

上面所有方式都需要先运行webpack -w监听文件变化

参考