javascript - webpack打包出現react-dom相關錯誤

Question

login.js程式碼

import React from 'react';
import ReactDOM from 'react-dom';

function tick() {
  const element = (
    <p>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </p>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

webpack.config.js程式碼

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

module.exports=(env)=>{
    return {
        entry:{
            main:'./login.js',
            vendor1:'React',
            vendor2:'ReactDOM'
        },

        output:{
            filename:'[name].bundle.js',
            path:path.resolve(__dirname,'dist')
        },
         module: {
            rules: [
              {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader'
              }
            ]
         },
        plugins:[
            new webpack.optimize.CommonsChunkPlugin({
                name:'manifest'
            }),

        /*    new webpack.optimize.CommonsChunkPlugin({
                name:'vendor1',
                minChunks:(module)=>{
                    return module.context&&module.context.indexOf('node_modules')!==-1;
                }
            }),

            new webpack.optimize.CommonsChunkPlugin({
                name:'vendor2',
                minChunks:(module)=>{
                    return module.context&&module.context.indexOf('node_modules')!==-1;
                }
            })*/
        ]
    }
}
setInterval(tick, 1000);

控制台錯誤

WARNING in D:/node/likeread/~/React/lib/ReactPropTypesSecret.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\node\likeread\node_modules\babel-loader\lib\index.js!D:\node\likeread\node_modules\React\lib\ReactPropTypesSecret.js
    Used by 1 module(s), i. e.
    D:\node\likeread\node_modules\babel-loader\lib\index.js!D:\node\likeread\node_modules\React\lib\checkReactTypeSpec.js
* D:\node\likeread\node_modules\babel-loader\lib\index.js!D:\node\likeread\node_modules\react\lib\ReactPropTypesSecret.js
    Used by 1 module(s), i. e.
    D:\node\likeread\node_modules\babel-loader\lib\index.js!D:\node\likeread\node_modules\react\lib\checkReactTypeSpec.js

ERROR in Entry module not found: Error: Can't resolve 'ReactDOM' in 'D:\node\likeread\public\javascripts'

Answer 1

你把ReactDOM.render()写在tick方法中是什麼意思？