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/common 文件中的更改将不会应用，直到 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 配置中？

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

webpack-dev-server doesn't compile React components in subfolders

javascript

reactjs

webpack

webpack-dev-server

mobx