对于HMR我对照老师您的配置试了一下，HMR不起作用，打开控制台有报错

Question

Answer 1

提问者 蜡笔小新的动感光波 2019-06-17 20:18:56

对应的package.json

{
 "name": "lesson",
 "version": "1.0.0",
 "description": "",
 "main": "src/index.js",
 "scripts": {
   "start": "webpack-dev-server"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "auto-prefixer": "^0.4.2",
   "autoprefixer": "^9.5.1",
   "clean-webpack-plugin": "^3.0.0",
   "css-loader": "^2.1.1",
   "express": "^4.17.1",
   "file-loader": "^3.0.1",
   "html-webpack-plugin": "^3.2.0",
   "node-sass": "^4.12.0",
   "postcss-loader": "^3.0.0",
   "sass-loader": "^7.1.0",
   "style-loader": "^0.23.1",
   "url-loader": "^1.1.2",
   "webpack": "^4.32.2",
   "webpack-cli": "^3.3.2",
   "webpack-dev-middleware": "^3.7.0",
   "webpack-dev-server": "^3.7.1"
 }
}

Answer 2

提问者 蜡笔小新的动感光波 2019-06-17 20:10:07

webpack.config.js如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
   mode : 'development',
   devtool: "source-map",
   entry: {
       main : './src/index.js'
   },
   devServer: {
       contentBase : './dist',
       port : 8080,
       hot : true,
       hotOnly : true
   },
   module :{
       rules : [{
           test : /\.(jpg|png|gif)$/,
           use :{
               loader: "url-loader",
               options :{
                   // placeholder 占位符
                   name : '[name].[ext]',
                   outputPath : 'images/'
               }
           }
       },{
           test : /\.css$/,
           use : [
               'style-loader',
               'css-loader'
           ]
       }]
   },
   plugins: [
       new HtmlWebpackPlugin({template : './src/index.html'}),
       new CleanWebpackPlugin(),
       new webpack.HotModuleReplacementPlugin()
   ],
   output: {
       publicPath: "/",
       filename: "[name].js",
       path : path.resolve(__dirname, 'dist')
   }
};

Answer 3

提问者 蜡笔小新的动感光波 2019-06-17 20:09:11

index.js文件如下：

import './style.css';

var btn = document.createElement('button');
btn.innerHTML = '新增';
document.body.appendChild(btn);
btn.onclick = function(){
   var div = document.createElement('div');
   div.innerHTML = 'item';
   document.body.appendChild(div);
};

Answer 4

提问者 蜡笔小新的动感光波 2019-06-16 21:34:31

请问一下是哪里配置出问题了吗

• Dell #1

  代码写错了，你把代码贴上了，有死循环。

• 提问者 蜡笔小新的动感光波 回复 Dell #2

  老师我把我对应代码贴出来了，麻烦您帮我看一下，我今天找了一下还是没找到对应的问题

• 提问者 蜡笔小新的动感光波 回复 Dell #3

  老师感觉是版本的问题，因为别的同您的代码是一样的

点开查看后面3条评论