使用了webpack4.6的devServer，但是修改一些依赖的js文件无法自动刷新页面？

Question

先直接上代码吧，然后再描述问题~

webpack.common.js

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

module.exports = {
    entry: {
        app: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "src"),
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/transform-runtime']
                    }
                }
            },
            {
                test: /\.css$/,
                include: path.resolve(__dirname, "src"),
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'myProject'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        inline: true,
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
});

package.json

{
  "dependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46",
    "@babel/runtime": "^7.0.0-beta.46",
    "babel-loader": "^8.0.0-beta.0",
    "webpack": "^4.6.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.0.0-beta.46",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-server": "^3.1.3",
    "webpack-merge": "^4.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
}

index.js

import someplugins from './someplugins.js';

function component() {
    do something...
    return element;
}
var element = component();
document.body.appendChild( element );

if (module.hot) {
    module.hot.accept('./someplugins.js', function() {
        document.body.removeChild(element);
        element = component(); 
        document.body.appendChild(element);
    });
}

如果我更新 someplugins.js 的也就是 index.js 引入的 js 模块，虽然 devServer 会帮我重新编译，但是却不会自动刷新页面，而直接改动 index.js 的内容则会重新编译并刷新，不知道是不是我的配置在哪里出了问题呢，还是有一些解决方案，还请大佬帮忙~

ps：这个环境基本上就是照着 webpack4.x 的官方指南搭建的。

Answer 1

因为你更改了 package.json 中的 script，里面的 webpack 的js配置指向被你删除了。

这里有一个 webpack4 入门例子,你可以查看一下 https://github.com/crlang/eas... 。