帶有Webpack設置的ReactJS-應用顯示空白頁

Question

我在這里有一個不同的線程： React Build Tool和Dev Server來使用Webpack設置React。 似乎正在運行，但是讓html頁面顯示來自入口點app.js的代碼存在問題。 我可以看到代碼在bundle.js中。 如果我修改app.js中的任何內容，直到render方法，例如輸入錯字或某些東西，我都會在控制台上看到錯誤，但render（）方法沒有任何反應。 不管我做什么，都沒有錯誤，只有空白頁沒有顯示。

app.js

import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component {
  render() {
    return (
      ReactDOM.render(<h1>Render me!</h1>, 
        document.getElementById('app'))
    );
  }
}

Index.html

<!DOCTYPE html>
    <html>
      <head>
        <!-- Bootstrap, latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
      </head>
      <body>
        <div id="app"></div>
      <script type="text/javascript" src='bundle.js'></script>
      </body>
    </html>

因此，如果我查看頁面源代碼，它只會顯示正好而不是預期的

渲染我！

以防萬一下面是我的webpack.config

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

module.exports = {
  entry: {
    bundle: './src/app.js'
  },

   output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
   resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

這也來自我的package.json。 我相信我的bundle.js正在從內存中提供。

  "scripts": {
    "start": "webpack-dev-server --port 3000 --hot --inline",
    "build": "webpack --progress --colors"
  }

我運行npm start來編譯並啟動服務器。 我期望npm build將構建到dist文件夾，但不是。 現在，我只想以一種或另一種方式工作，這樣我就可以開始編碼了。

和.babelrc

{
   "presets":[
        "es2017", "react"
   ]
}

Answer 1

您正在使用WebPack 3.x嗎？ 試試這個配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const autoprefixer = require('autoprefixer');

const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname);
const buildPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'source-map',
          devServer: {    
          historyApiFallback: true,
          contentBase: './'
      },
    entry: {
        "index" :path.resolve(sourcePath, 'index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
        modules: [
            sourcePath,
            path.resolve(__dirname, 'node_modules')
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.[chunkhash].js',
            minChunks: Infinity
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer({
                        browsers: [
                            'last 3 version',
                            'ie >= 10'
                        ]
                    })
                ],
                context: staticSourcePath
            }
        }),
        new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html'),
            path: buildPath,
            excludeChunks: ['base'],
            filename: 'index.html',
            minify: {
                collapseWhitespace: true,
                collapseInlineTagWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true
            }
        }),
        new PreloadWebpackPlugin({
            rel: 'preload',
            as: 'script',
            include: 'all',
            fileBlacklist: [/\.(css|map)$/, /base?.+/]
        }),
        new webpack.NoEmitOnErrorsPlugin()

    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['env', 'react'],
                  }
                },
                include: sourcePath
            },
            {                
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        'postcss-loader',
                        'sass-loader'
                    ]
                })
            },
            {
                test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                use: 'file-loader?name=assets/[name]-[hash].[ext]'
            },
            {
                test: /\.(png|gif|jpg|svg)$/,
                use: [
                    'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
                ],
                include: staticSourcePath
            }
        ]
    }
};

帶有Webpack設置的ReactJS-應用顯示空白頁

問題描述

渲染我！

1 個解決方案

解決方案1
0 2017-10-29 08:48:36

帶有Webpack設置的ReactJS-應用顯示空白頁

問題描述

渲染我！

1 個解決方案

解決方案1 0 2017-10-29 08:48:36

解決方案1
0 2017-10-29 08:48:36