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）中的某些文件时，将应用所有更改并在浏览器中重新应用应用程序。

但是当我从组件子文件夹（例如/common/Field.jsx）更改文件时，webpack-dev-server看不到更改和应用程序没有重绘。此外，如果我在组件文件夹中进行了一些更改，则会重新绘制应用程序，但在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无法编译子文件夹

1 个答案: