Question

我正在研究Lynda的反应教程 - React JS Essential Training。我被困在那个部分，通过使用devServer，如果我更新我的index.js文件，它应该自动更新我的babel bundle.js文件，但这没有发生。

我认为发生的事情是我的webpack.config文件有问题，因为如果我更新babel bundle.js文件，index.html文件会更新（但仅当我刷新浏览器时）。如果我更新index.js文件，浏览器中的输出不会更新，除非我关闭devServer并再次运行babel。

我做错了什么？这是我的文件：

webpack.config

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist/assets',
        filename: 'bundle.js',
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3333
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['react']
                }
            }
        ]
    }
}

index.js

const { render } = ReactDOM

render(
    <h1 id='title'
    className='header'
    style={{backgroundColor: 'orange', color: 'white', fontFamily: 'verdana'}}>
    Ha World
    </h1>,
    document.getElementById('react-container')
    )

bundle.js（babel）

'use strict';

var _ReactDOM = ReactDOM,
    render = _ReactDOM.render;


render(React.createElement(
    'h1',
    { id: 'title',
        className: 'header',
        style: { backgroundColor: 'orange', color: 'white', fontFamily: 'verdana' } },
    'HEY World'
), document.getElementById('react-container'));

的index.html

<head>
    <script src="/react-15.1.0.js"></script>
    <script src="/react-dom-15.1.0.js"></script>
    <meta charset="UTF-8">
    <title>Hello World with React</title>
</head>
<body>
    <div id="react-container"></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Answer 1

我有同样的问题。在尝试了几个选项后，我通过将 devServer 选项中的 publicPath 值指向我的webpack.config.js文件中的输出路径的位置来完成此工作。

下面的我的webpack.config.js

<body>
    <div id="dayinmylife">
        <p>We are also linking here!</p>
    </div>
</body>

Answer 2

试试这个。

const webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist/assets',
        filename: 'bundle.js',
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3333,
        hot: true //trigger hot load.
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['react']
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //add hot module replacement plugin.
    ]
}

这是offical document。

Webpack - Devserver没有更新babel bundle.js

2 个答案: