webpack-dev-server

server >
index

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

main.js

document.write('<h1>Hello World!!!</h1>');

package.json

{
  "name": "webpack-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

webpack.config.js

module.exports = {
    devtool: 'eval-source-map',
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./",
        quiet: false, //控制台中不输出打包的信息
        noInfo: false,
        hot: true, //开启热点
        inline: true, //开启页面自动刷新
        lazy: false, //不启动懒加载
        progress: true, //显示打包的进度
        watchOptions: {
            aggregateTimeout: 300
        },
        port: '8080', //设置端口号
        //其实很简单的，只要配置这个参数就可以了
        proxy: {
            '/hy-api': {
                target: 'http://192.168.1.14:8080',
            }
        }
    }
};