Question

我为我的应用程序设置了一个webpack开发服务器（使用React加载热量），但是当我访问http://localhost:8080时，我看到的只有

〜/

屏幕上的

。当我运行npm start时，构建表明它已成功编译。我是通过Windows 10上的Bash构建的。下面是我的webpack.config.js文件：

// hack for Ubuntu on Windows
try {
    require('os').networkInterfaces();
}
catch (e) {
    require('os').networkInterfaces = () => ({});
}

const path = require('path');
const webpack = require("webpack");

module.exports = {
    devServer: {
        hot: true,
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    devtool: 'inline-source-map',
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/app/index.js'
    ],
    module: {
        rules: [{
            test: /\.js?$/,
            use: ['babel-loader'],
            exclude: /node_modules/
        },{
            test: /\.jsx?$/,
            use: ['babel-loader?' + JSON.stringify({
                presets: ["es2015", "stage-2", "react"]
            })],
            exclude: /node_modules/
        },{
            test: /\.css?$/,
            use: ['style-loader','css-loader?modules']
        },{
            test: /\.jpg?$/,
            use: ['file-loader']
        },{
            test: /\.ico$/,
            use: ["file-loader"]
        },{
            test: /\.png$/,
            use: ["url-loader?limit=100000"]
        },{
            test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
            use: ["url-loader?limit=10000&mimetype=application/font-woff"]
        },{
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: ["url-loader"]
        },{
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: ["file-loader"]
        },{
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: ["url-loader?limit=10000&mimetype=image/svg+xml"]
        }]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('dev')
            }
        }),
        new webpack.HotModuleReplacementPlugin(),
        // enable HMR globally

        new webpack.NamedModulesPlugin()
        // prints more readable module names in the browser console on HMR updates
    ],
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    }
};

Answer 1

发现我没有将index.html文件放在dist文件夹中（该服务包来自服务器）。

Webpack dev服务器显示〜/在浏览器中

1 个答案: