webpack-dev-server不会在子文件夹中编译React组件

Question

我正在使用webpack-dev-server开发React + Mobx应用程序。

项目文件夹结构：

/assets
/dist
/public
/src
  /components
    /common
      Field.jsx
      Button.jsx
      ...
    ComponentA.jsx
    ComponentB.jxs
    ...
  /stores
    StoreA.js
    StoreB.js
    ...
  index.jsx
  ...
package.json
webpack.config.js
...

当我启动开发服务器并更改组件或存储文件夹中的某些文件时（例如，ComponentA.jsx或StoreA.js），所有更改都将被应用，而React应用程序将在浏览器中重绘。

但是，当我从组件子文件夹（例如，/ common / Field.jsx）更改文件时，webpack-dev-server不会看到更改，并且不会重新绘制应用程序。 另外，如果我在components文件夹中进行了一些更改，应用程序将被重画，但是在webpack-dev-server重新加载之前，组件/公共文件中的更改将不会应用。

webpack.config文件：

const extractCSS = new ExtractTextPlugin({
  filename: '[name]-[hash].css',
  allChunks: true
});

const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'src', 'index.jsx');
const LOGIN_PATH = path.resolve(ROOT_PATH, 'src', 'login.jsx');
const DIST_PATH = path.resolve(ROOT_PATH, 'dist');

const babel = {
  loader: 'babel-loader',
  query: {
    presets: [ 'react', 'es2015', 'stage-0' ],
    plugins: [
      [
        "transform-runtime", {
          "polyfill": false,
          "regenerator": true
        }
      ],
      'transform-decorators-legacy'
    ]
  }
};

module.exports = (env) => ({
  entry: (env.test ? ['babel-polyfill', 'whatwg-fetch'] : {
    index: ['babel-polyfill', 'whatwg-fetch', SRC_PATH],
    login: ['babel-polyfill', 'whatwg-fetch', LOGIN_PATH]
  }),
  devtool: 'source-map',
  devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: '3000'
  },
  output: {
    path: DIST_PATH,
    filename: env.production ? "bundle-[name]-[hash].js" : "bundle-[name].js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: (env.test ? [ babel ] : [ babel, 'eslint-loader' ])
      },
      {
        test: /\.scss$/,
        use: extractCSS.extract(['css-loader', 'sass-loader'])
      },
      {
        test: /\.(png|jpg|ico|svg|json)$/,
        loader: env.production ?
          'file-loader?name=img/[name]-[hash].[ext]' :
          'file-loader?name=img/[name].[ext]'
      }
    ]
  },
  plugins: [
    extractCSS,
    new HTMLWebpackPlugin({
      template: 'src/index.ejs',
      filename: 'index.html',
      sha: childProcess.execSync('git rev-parse HEAD').toString().replace(/\n/g, ''),
      env,
      chunks: ['index']
    }),
    new HTMLWebpackPlugin({
      template: 'src/login.ejs',
      filename: 'login.html',
      sha: childProcess.execSync('git rev-parse HEAD').toString().replace(/\n/g, ''),
      env,
      chunks: ['login']
    }),
  ],
  resolve: {
    extensions: [ '.js', '.jsx' ],
    modules: ['node_modules', 'assets', 'src']
  },
  node: {
    fs: 'empty'
  }
});

有谁知道如何解决这个问题？

Answer 1

尝试添加

watchOptions: {
  poll: true
}

在webpack配置中？