// server.js
const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');

// 从 webpack.config.js 文件中读取 Webpack 配置
const config = require('./webpack.config.js');
const app = express();

// 用读取到的 Webpack 配置实例化一个 Compiler
const compiler = webpack(config);
// 给 app 注册 webpackMiddleware 中间件
app.use(webpackMiddleware(compiler));
// 为了支持模块热替换
app.use(require('webpack-hot-middleware')(compiler));
// 把项目根目录作为静态资源目录，用于服务 HTML 文件
app.use(express.static('.'));
// 启动 HTTP 服务器，监听在 3000 端口
app.listen(3000, () => {
  console.info('成功监听在 3000');
});

// webpackMiddleware 函数的第2 个参数为配置项
app.use(webpackMiddleware(compiler , {
  // 在webpack-dev-middleware 支持的所有配置项中
  // publicPath 属性为必填项，其他都是选填项

  // Webpack 输出资源绑定HTTP 服务器上的根目录，
  //和Webpack 配置中的publicPath 含义一致
  publicPath :'/assets/',

  //不输出info 类型的日志到控制台，只输出warn 和error 类型的日志
  noinfo: false,

  //不输出任何类型的日志到控制台
  quiet: false ,

  //切换到懒惰模式，这意味着不监听文件的变化，只会在有请求时再编译对应的文件，
  //这适合页面非常多的项目。
  lazy: true,

  // watchOptions
  // 只在非懒惰模式下才有效
  watchOptions: {
    aggregateTimeout : 300 ,
    poll : true
  }

  // 默认的URL 路径，默认是'index.html'
  index: 'index.html',

  // 自定义HTTP 头
  headers: {'X-Custom-Header': 'yes'},

  //为特定后缀的文件添加HTTP mimeTypes ，作为文件类型映射表
  mimeTypes: {'text/html ':['phtml']},
  
  //统计信息输出样式
  stats: {
    colors: true
  }
  
  //自定义输出日志的展示方法
  reporter: null,
  
  //开启或关闭服务端渲染
  serverSideRender: false,
}))

// webpack.config.js
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

module.exports = {
  entry: [
    // 为了支持模块热替换
    'webpack-hot-middleware/client',
    // JS 执行入口文件
    './src/main.js'
  ],
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
  },
  plugins: [
    // 为了支持模块热替换
    new HotModuleReplacementPlugin(),
  ],
  devtool: 'source-map',
};

// server.js

// 为了支持模块热替换
app.use(require('webpack-hot-middleware')(compiler));
// 把项目根目录作为静态资源目录，用于服务 HTML 文件
app.use(express.static('.'));

// main.js

// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

// 为了支持模块热替换 所有从main.js入口进入之后依赖的模块更新之后，都会立马执行热替换
if (module.hot) {
  module.hot.accept();
}


// 这种写法，指捕获到 show.js的热更新后执行一段操作
// if (module.hot) {
//   module.hot.accept(['./show.js'], ()=> {
//     window.document.getElementById('app').innerText = '监听到了show.js的更新！！！';
//   });
// }

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