javascript - webpack打包出现react-dom相关错误

问题描述

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.jsThere 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:nodelikereadnode_modulesbabel-loaderlibindex.js!D:nodelikereadnode_modulesReactlibReactPropTypesSecret.js Used by 1 module(s), i. e. D:nodelikereadnode_modulesbabel-loaderlibindex.js!D:nodelikereadnode_modulesReactlibcheckReactTypeSpec.js* D:nodelikereadnode_modulesbabel-loaderlibindex.js!D:nodelikereadnode_modulesreactlibReactPropTypesSecret.js Used by 1 module(s), i. e. D:nodelikereadnode_modulesbabel-loaderlibindex.js!D:nodelikereadnode_modulesreactlibcheckReactTypeSpec.jsERROR in Entry module not found: Error: Can’t resolve ’ReactDOM’ in ’D:nodelikereadpublicjavascripts’

问题解答

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