我在這裏有一個不同的線程：React Build Tool and Dev Server 設置React與Webpack。似乎它正在工作，但我有一個問題，讓HTML頁面顯示來自入口點app.js的代碼。我可以看到代碼是在bundle.js中。如果我修改app.js中的任何內容，直到呈現方法，例如輸入錯字或其他東西，我會在控制檯上看到錯誤，但render（）方法沒有任何反應。無論我在那裏做什麼都沒有錯誤，沒有什麼顯示，只是一個空白頁面。ReactJS與Webpack安裝程序 - 應用程序顯示空白頁

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構建將建立dist文件夾，但它不。現在我只想要這種方式或另一種方式，所以我可以開始編碼。

而且

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

來源

2017-10-29 sayayin

你可以嘗試放置'<腳本類型= 「文/ JavaScript的」 SRC = 'bundle.js'>'的'body'標籤下面的'index.html'？ –

好的我做到了，但仍然是相同的結果 – sayayin

當你說「沒有錯誤」時，你有開發者工具是否可以打開到控制檯？ –

您正在使用的WebPack 3.X .babelrc？試試這個配置：

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 
      } 
     ] 
    } 
};

來源

2017-10-29 08:48:36 Kuzma

是的，我正在使用webpack 3.0，但我真的不需要。我繼續前進，試了一下，不得不安裝一堆軟件包，但仍然無法構建。似乎如果我使用，我需要一堆其他的東西。必須有一個簡單的配置文件，我可以使用這個工作。 – sayayin

是的，一些插件是多餘的，但這對我來說也適用於舊的IE8。如果您在編譯過程中沒有收到任何錯誤，那麼問題可能在其他地方 – Kuzma

ReactJS與Webpack安裝程序 - 應用程序顯示空白頁

渲染我！下面

回答

相關問題