子目录中的 Webpack-dev-server - 不编译 & 不热重载答案

【问题标题】：Webpack-dev-server in sub directory - not compiling & no hot reloading子目录中的 Webpack-dev-server - 不编译 & 不热重载
【发布时间】：2017-10-19 13:17:27
【问题描述】：

我正在尝试在子目录（公共）中运行 webpack 开发服务器，以便我可以将 react 集成到现有站点中。

Repo - minimal-react-webpack-starter

当我使用npm run start 从子目录运行它时，热重载或编译都不起作用，但是当我从根目录运行它们而不使用--content-base 或devServer.publicPath 时，它工作正常。

文件夹结构 -

|- App/
    |- node-modules/
    |- public/
        |- react/
            |- main.js
        |- index.html
    |- shared/
        |- react/
            |- components/
            |- main.js
|- package.json
|- webpack.config.js

index.html 包含<script src="react/main.js"></script>

Webpack 配置 -

const path = require('path');

const config = {
    entry: './shared/react/main.js',
    output: {
        publicPath: "public/react",
        path: path.resolve(__dirname, 'public/react'),
        filename: 'main.js',
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    devServer: {
            inline: true,
             publicPath: "public/",
             contentBase: path.join(__dirname, "public"),
             hot: true,
             port: 8080,
        },

}

pacakge.json -

{
"name": "App",
"version": "1.0.0",
"repository": "Ash-repo",
"description": "App",
"devDependencies": {
  "babel-core": "^6.24.1",
  "babel-loader": "^7.0.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "path": "^0.12.7",
  "react": "^15.5.4",
  "react-dom": "^15.5.4",
  "webpack": "^2.5.0",
  "webpack-dev-server": "^2.4.5"
},
"scripts": {
  "start": "webpack-dev-server --content-base public/ --hot --progress --colors",
  "watch": "webpack --progress --colors --watch",
  "test": "echo \"Error: no test specified\" && exit 1"
}
}

看不出它为什么不编译或重新加载，我设置了 publicPath（在输出和 devServer 中）和 content-base 指向公共。我查看了http://localhost:8080/webpack-dev-server/ 和http://localhost:8080/，但没有发生重新加载或编译！

任何帮助将不胜感激！ ????

【问题讨论】：

更新 devServer 中的 webpack 配置文件 historyApiFallback: { disableDotRule: true } 更新脚本： webpack-dev-server --content-base public/ --hot --progress --colors --history -api-fallback
@Kasiriveni 感谢您的帮助！刚试过，但没有运气！

标签： reactjs webpack webpack-dev-server

【解决方案1】：

webpack 配置似乎不正确。使用下面的 webpack 配置将在子目录的情况下启用热重载。

const path = require('path');
const config = {
    entry: './shared/react/main.js',
    output: {
        publicPath: "public/react",
        path: path.resolve(__dirname, 'public/react'),
        filename: 'main.js',
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    devServer: {
        inline: true,
        publicPath: "/react/",
        contentBase: path.join(__dirname, "public"),
        hot: true,
        port: 8070
    }
}

devServer.publicPath 是这里的重要更改。有关它的更多信息，请访问 webpack 的官方文档here

我希望这会有所帮助！

【讨论】：