Question

我是React.js的新手。我使用'create-react-app'命令创建了项目。我想添加服务器，所以弹出项目。但是位于 src 文件夹下的文件不会出现在localhost：4000上。我可以在index.html中看到内容。我的问题是什么？

这是我的 package.json 脚本

"scripts": {
    "development": "cross-env NODE_ENV=development nodemon --exec babel-node --presets=es2015 ./server/main.js --watch server"
}

这是 webpack.dev.config.js

  var webpack = require('webpack');
    var path = require('path');

    module.exports = {

    entry: [
        'babel-polyfill',
        './src/index.js',
        'webpack-dev-server/client?http://0.0.0.0:4000',
        'webpack/hot/only-dev-server',
        './src/style.css'
    ],

    output: {
        path: '/',
        filename: 'bundle.js'
    },

    devServer: {
        hot: true,
        filename: 'bundle.js',
        publicPath: '/',
        historyApiFallback: true,
        contentBase: './public',
        proxy: {
            "*": "http://localhost:3000"
        }
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],

    resolve: {
      modules: [path.resolve("./src"), 'node_modules']
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader?' + JSON.stringify({
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                })],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

Answer 1

webpack-dev-server仅加载/etc/rsyslog.conf的内容，因为它没有看到捆绑文件index.html。在您的配置中，捆绑文件的目标是目录bundle.js。

'/'

但output: { path: '/', filename: 'bundle.js' }提供webpack-dev-server目录（'./public'）中的内容。您应该告诉webpack查看公共目录和根目录，如下所示

contentBase: './public'

不要忘记在index.html中引用包文件。

（React webpack）在开发模式下运行项目时，不会加载src文件夹下的文件

1 个答案: