webpack-dev-server没有建立,也没有运行热重载(react.js)

时间:2017-01-07 15:30:33

标签: javascript node.js reactjs npm webpack

我对React很新,在学习教程时面临问题。我能够使用webpack命令构建和运行输出js文件,但我无法使用webpack-dev-server构建它。有人能找出错误吗?

以下是我使用npm run dev的确切命令。以下是code 使用的IDE:Visual Studio代码

文件夹结构:
folder structure of the app
在结构中,我所拥有的dist文件夹下的build.min.js文件是我手动运行webpack命令,但运行webpack-dev-server并更改任何.js /。 html文件它没有重建/重新加载。以下是配置文件。

的package.json

{
  "name": "reacr-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^1.14.0"
  },
  "devDependencies": {
    "nodemon": "^1.11.0",
    "webpack-dev-server": "^1.16.2"
  }
}

Webpack.config.json

    var debug = process.env.NODE_ENV !== "production";
    var webpack = require('webpack');

    module.exports = {
      context: __dirname + "/src",
      devtool: debug ? "inline-sourcemap" : null,
      entry: "./js/app.js",
      module: {
          loaders: [
              {
                  test: /\.js?$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: 'babel-loader',
                  query: {
                      presets: ['react', 'es2015', 'stage-0'],
                      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                  }
              }
          ]
      },
      output: {
        path: __dirname + "/src/dist",
        filename: "build.min.js"
      },
      plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
      ],
    };`

0 个答案:

没有答案