javascript - 让 React 开发人员工具与 Webpack 一起工作

Question

我关注了这个tutorial在 Webpack 中将 React 公开为全局。 Expose 模块已安装，我在配置 webpack.config.js 文件中添加了模块加载器。但是，它不起作用并且 React 开发人员工具仍然无法访问。

这是我的 webpack.config.js 文件，第一个加载器是 expose-react:

var path = require ('path'),
    webpack = require ('webpack'),
    htmlWebpackPlugin = require ('html-webpack-plugin');

const PATHS = {
    app : path.join (__dirname, 'app'),
    build : path.join (__dirname, 'build')
};

module.exports = {
    entry : {
        main : PATHS.app + '/Main.jsx'
    },
    output : {
        path : PATHS.build,
        filename : 'dressAphrodite.js'
    },
    module : {
        loaders : [
            {
                test : require.resolve ('react'),
                loader : 'expose?React'
            },
            {
                test : /\.css$/,
                loaders : ['style', 'css'],
                include : PATHS.app
            },
            {
                test : /\.js?$/,
                loader : 'babel-loader',
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : 'babel-loader',
                include : PATHS.app
            }
        ]
    },
    debug : true,
    devtool : 'source-map',
    devServer : {
        contentBase : './app',
        progress : true,
        stats : 'errors-only',
    },
    plugins : [
        new htmlWebpackPlugin ({
            title : 'Dress',
            hash : true
        })
    ]
};

关于安装依赖项的信息，这是我的 package.json 文件:

{
  "name": "dress",
  "version": "1.0.0",
  "description": "",
  "main": "./main.jsx",
  "dependencies": {
    "i": "^0.3.3",
    "npm": "^3.5.2",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "html-webpack-plugin": "^1.7.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

这是 .babelrc 文件的内容:

{
  'presets' : [
    'es2015',
    'react'
   ]
}

Answer 1

实际上有一个解决方案，你必须在 more here 上使用 --inline 选项启动 webpack ，所以服务器将位于 localhost:8080 而不是 localhost:8080/webpack-dev-server，热重载仍然有效，你将能够看到你的 React 开发工具 :D