尝试复制某个人通过视频开发的示例来配置开发环境以使用React Js时,我遇到了一个问题,考虑到我以同样的方式做了所有事情,这些问题非常混乱。
执行npm run dev
命令后,正如我在** package.json **中配置的那样,出现以下错误:
npm run dev
> reactnode@1.0.0 dev C:\Users\PterPmntaM\CursoReactJS\ReactNode_Scaffold
> nodemon --exec babel-node src/server.js
[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node src/server.js`
Live Reload listening on port 35729
app start over the port 8080
‼ 「wdm」: Hash: 13bdb96250e1132eff8a
Version: webpack 4.1.1
Time: 2340ms
Built at: 2018-3-17 15:29:23
Asset Size Chunks Chunk Names
bundle.js 97 KiB 0 [emitted] main
index.html 283 bytes [emitted]
Entrypoint main = bundle.js
[0] ./node_modules/fbjs/lib/emptyFunction.js 959 bytes {0} [built]
[1] ./node_modules/fbjs/lib/emptyObject.js 332 bytes {0} [built]
[2] ./node_modules/object-assign/index.js 2.06 KiB {0} [built]
[3] ./node_modules/react/index.js 190 bytes {0} [built]
[4] ./node_modules/fbjs/lib/focusNode.js 578 bytes {0} [built]
[6] ./node_modules/fbjs/lib/isTextNode.js 479 bytes {0} [built]
[7] ./node_modules/fbjs/lib/containsNode.js 923 bytes {0} [built]
[8] ./node_modules/fbjs/lib/shallowEqual.js 1.58 KiB {0} [built]
[9] ./node_modules/fbjs/lib/getActiveElement.js 912 bytes {0} [built]
[10] ./node_modules/fbjs/lib/EventListener.js 2.2 KiB {0} [built]
[11] ./node_modules/fbjs/lib/ExecutionEnvironment.js 935 bytes {0} [built]
[12] ./node_modules/react-dom/cjs/react-dom.production.min.js 90.5 KiB {0} [built]
[13] ./node_modules/react-dom/index.js 1.33 KiB {0} [built]
[14] ./node_modules/react/cjs/react.production.min.js 5.29 KiB {0} [built]
[15] ./src/client/index.jsx 567 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 531 KiB 0
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/client/index.html 606 bytes {0} [built]
i 「wdm」: Compiled with warnings.
接下来,我将放置部分coigo,因为它不会产生错误
{
"name": "reactnode",
"version": "1.0.0",
"description": "scaffoldproject",
"main": "index.js",
"scripts": {
"dev": "nodemon --exec babel-node src/server.js",
"build": "webpack"
},
"author": "PterPmntaM",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^3.0.6",
"node-sass": "^4.7.2",
"nodemon": "^1.17.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-middleware": "^3.0.1",
"webpack-livereload-plugin": "^2.0.0"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
import webpack from 'webpack';
import path from 'path';
import htmlWebpackPlugin from 'html-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
export default {
entry: './src/client/index.jsx',
output: {
path: path.resolve('src/js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({ template: './src/client/index.html' }),
new LiveReloadPlugin()
]
};