npm运行dev编译但不生成bundle js

时间:2018-03-17 20:47:33

标签: javascript node.js reactjs npm webpack

尝试复制某个人通过视频开发的示例来配置开发环境以使用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,因为它不会产生错误

的package.json

{
  "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"
  }
}

webpack.config.js

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

structure

GitHub Repo

0 个答案:

没有答案