Question

我是第一次在Windows环境中进行开发（来自OS）。

我已经为React应用奠定了基础，并且webpack的构建没有错误，但是只有原始HTML渲染。即，ReactDOM进程似乎失败或某种原因，因为我的应用程序组件根本无法呈现。请注意，我利用了我内置于OS中的应用程序中的代码，想知道这是否与它有关。

请参见下面的代码。感谢您的浏览。

第一个我的webpack.config.js文件：

const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
    entry: `${SRC_DIR}\\index.js`,
    output: {
      path: path.resolve(__dirname, 'client/dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.jsx?/,
          include: SRC_DIR,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
            plugins: ['syntax-dynamic-import'],
          },
        },
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
          include: SRC_DIR,
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
      new ExtractTextPlugin("styles.css"),
      // ,
      // new UglifyJSPlugin(),
    ],
  };

下一个我的html文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="https://orig00.deviantart.net/15e4/f/2011/116/f/4/color_wheel_dock_icon_by_andybaumgar-d3ezjgc.png">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <title>SysAdmin Microservices</title>
    </head>
    <body>
        <h1>Node Microservices Server Documentation</h1>
        <div id="root"></div>
    </body>
</html>

我的带有ReactDOM.render调用的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App.jsx';

ReactDOM.render( <App />, document.getElementById('root'));

我所有的App.js文件中的最后一个：

import React from 'react';

class App extends React {

    render() {
        console.log('app render has been invoked <-- this never logs to the console ');
        return (
            <h1>This is the text that does not render in the browser.</h1>
        )
    }
}

export default App;

Answer 1

您需要从索引页面引用bundle.js，否则它将不会加载任何JS。会因您的文件夹结构而异，但是应该可以使用以下方法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="dist/bundle.js"></script>
    </body>
</html>

或者您可以使用html-webpack-plugin之类的Webpack插件将捆绑的JS作为构建过程的一部分注入。

Answer 2

您可以手动将脚本添加到包中，也可以使用html-webpack-plugin。

此插件将自动处理将脚本/样式插入到索引html（and more）。

步骤：

安装插件：npm install --save-dev html-webpack-plugin
在webpack配置中要求它：const HtmlWebpackPlugin = require('html-webpack-plugin')

将插件添加到插件配置中：

plugins: [
  new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
  }),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('development'),
    },
  }),
  new ExtractTextPlugin("styles.css"),
  // ,
  // new UglifyJSPlugin(),
]

Webpack构建但组件无法渲染

2 个答案: