为什么我不能直接使用我的main.js文件在浏览器上转换形式main.jsx文件？

Question

这是我的webpack.config.js代码......

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: ['webpack/hot/dev-server', 'babel-polyfill', './src/main.jsx'],
    output: {
        path: "./build",
        filename: "main.js"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
          query:
            {
              presets:['es2015', 'react']
            }
        }
  ]
},
resolve: {
  extensions: ['', '.js', '.jsx']
}

}

这是我的package.son文件....

{
  "name": "udemy-react",
  "version": "0.0.1",
  "description": "",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack",
      "dev": "webpack-dev-server --devtool eval --progress --colors --hot --    content-base build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }
}

运行npm run dev之后，我将从.jsx文件获取我的main.js文件，并且在localhost：8080上一切顺利。

我的问题是，为什么我不能直接使用.js文件而不在web pack服务器上运行？

因为我直接在我的.html中包含main.js文件并在浏览器中打开，我得到了

Uncaught Error: [HMR] Hot Module Replacement is disabled.

我认为网络包已经为我提供了一切，所以我可以直接使用它。

如果我想制作生产环境，我该怎么办？