0

我在开发环境中使用 docker，在 macOS 上进行热模块更换。我可以成功运行我的应用程序，并且在更改文件时，webpack 热重载实际上会接受更改。但是，在此步骤中重新编译总是失败并显示以下错误消息：

错误信息

webpack.config

这是我的 webpack 配置：

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

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: 'bundle.[hash].js',
        //publicPath: '/'
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            camelCase: true,
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'dist/index.html',
        })
    ],
    devServer: {
        host: '0.0.0.0',
        contentBase: './dist',
        port: 8080,
        historyApiFallback: true,
        open: true,
        hot: true
    },
    watchOptions: { poll: true }
};

包.json

我的 package.json 文件：

{
  "scripts": {
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "react-hot-loader": "^4.0.1",
    "style-loader": "^0.20.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.2"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-prop-types": "^0.4.0",
    "react-router-dom": "^4.2.2",
    "semantic-ui-react": "^0.79.1"
  }
}

执行命令运行

要运行该应用程序，我使用以下命令行。它创建一个与 docker 同步的卷，并使用“start”命令启动开发服务器，执行webpack-dev-server。如果没有上述错误消息，我可以访问和使用该应用程序，但不能热重载。

docker run --rm -i -t -v /Path/to/folder:/app -p 8080:8080 jmfirth/webpack yarn start
4

1 回答 1

0

更新 问题现已修复。

基于这个问题及其讨论，这似乎是最新的 webpack-dev-servers 热模块与 webpack 4.5.0 相结合的问题。

该问题已通过将 webpack-dev-server 降级到 3.0.0 版本解决，但 webpack-dev-server 存储库中仍有一个未解决的问题。

于 2018-04-09T08:09:53.070 回答