webpack热重载毫无任何反应

Question

问题分析：页面正常加载，npm run dev也无任何报错，控制台HMR完全没有，我记得websocket应该有个sockjs.node用来热更新的也没有。。。什么都没有

项目git地址 ：git@github.com:liangyuqi/awesome-image.git

部分关键代码

1. package.json

{
  "name": "awesome-image",
  "version": "1.0.0",
  "description": "init",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack-dev.config.js --content-base ./example --color  --environment NODE_ENV:development",
    "dev:liangyuqi": "webpack-dev-server --config ./webpack-dev.config.js --host 10.232.8.48 --port 8086 --progress",
    "build": "webpack --config ./webpack-build.config.js  --environment NODE_ENV:production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^23.3.13",
    "@types/node": "^10.12.20",
    "@types/tapable": "^1.0.4",
    "@types/webpack": "^4.4.24",
    "awesome-typescript-loader": "^5.2.1",
    "html-webpack-plugin": "^3.2.0",
    "immutable": "^4.0.0-rc.12",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.1",
    "typescript": "^3.2.4",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/liangyuqi/awesome-image.git"
  },
  "bugs": {
    "url": "https://github.com/liangyuqi/awesome-image/issues"
  },
  "homepage": "https://github.com/liangyuqi/awesome-image#readme",
  "dependencies": {
    "@types/lodash": "^4.14.120"
  }
}

1. webpack-dev.config.js

const path = require('path')
const join = path.join
const resolve = path.resolve
const {
  camelCase
} = require('lodash')
const webpack = require('webpack')
const {
  TsConfigPathsPlugin,
  CheckerPlugin
} = require('awesome-typescript-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const env = process && process.env && process.env.NODE_ENV
const serverPort = process.env.npm_package_config_devPort || 8084
const dev = !(env && env === 'production')
/**
 * Update this variable if you change your library name
 */
const libraryName = 'awesome-image'
const plugins = [
  new CheckerPlugin(),
  new TsConfigPathsPlugin(),
  new HtmlWebpackPlugin({
    inject: true,
    title: libraryName,
    filename: 'index.html',
    template: join(__dirname, 'example/index.html'),
    hash: true,
    chunks: ['common', 'index']
  })
]
let entry = [
  // 'react-hot-loader/patch',
  `webpack-dev-server/client?http://localhost:${serverPort}`,
  // 'webpack-hot-middleware/client?reload=true',
  // bundle the client for webpack-dev-servers and connect to the provided endpoint
  'webpack/hot/only-dev-server',
  // bundle the client for hot reloading
  // `./src/${libraryName}.ts`
  __dirname + `/example/index.ts`
]
if (dev === false) {

} else {
  plugins.push(new webpack.HotModuleReplacementPlugin())
}
// plugins.push(new TsConfigPathsPlugin({configFile: "example/tsconfig.json"}))
module.exports = {
  mode: 'development',
  entry: {
    index: entry
  },
  // Currently cheap-module-source-map is broken https://github.com/webpack/webpack/issues/4176
  devtool: 'source-map',
  output: {
    path: join(__dirname, 'dist'),
    libraryTarget: 'umd',
    library: camelCase(libraryName),
    filename: `${libraryName}.js`
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  externals: {
    "createjs": "createjs"
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: [{
        loader: 'ts-loader'
      }]
    },
    {
      test: /\.scss$/,
      use: [ 'style-loader', 'css-loader', 'sass-loader' ]
    }]
  },
  plugins: plugins,
  devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'example'),
    port: serverPort,
    publicPath: '/'
  }
}

1. 文件结构：

1. 控制台输出

Answer 1

同热重载不管用，过来问一哈有解决方案了吗

Answer 2

你的example\index.html中的这段注释删除，或者放到后面去吧。
html-wabpack-plugin的inject的原理是通过正则匹配template中第一个</body>或者</html>作为插入位置。

你的chunks被插入在这里了。