文件更改时Webpack开发服务器不会重新编译答案

【问题标题】：Webpack dev server not recompiling when files change文件更改时Webpack开发服务器不会重新编译
【发布时间】：2018-03-16 22:08:54
【问题描述】：

我有一个项目分为 3 个部分：一个服务器和两个 webpack 捆绑的 web 客户端（应用程序和管理员）。两个 Web 客户端使用基本相同的 webpack 配置，只是在设置输出目录和开发服务器端口时稍作更改。每个客户端都有自己的 package.json 和一个运行 webpack-dev-server 的 watch 脚本。

两个客户端上的 watch 脚本均成功：应用程序已构建并可在 Web 浏览器中访问。但是，其中一个客户端（管理站点）在进行更改时不会重新构建，并且似乎一直在使用旧版本（webpack-dev-server 即使在重新启动后也会托管旧版本）。另一个客户端重建正常。

这里发生了什么？它们的配置几乎完全相同，它们使用相同的插件/加载器/等，它们使用相似的库（React、mobx 等）。

这是基本的 webpack 配置：

const webpack = require('webpack');
const path = require('path');
const { merge } = require('lodash');
const loaderUtils = require('loader-utils');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const env = process.env['NODE_ENV'];
const clientsRootDir = __dirname;

const defaultConfig = {
  buildDir: 'dist',
  entry: 'src/entry.js',
  server: 'http://localhost:8000',
  devServerPort: 8080,
  constants: {
    NODE_ENV: env,
    PRODUCTION: env === 'production',
    DEVELOPMENT: env === 'development',
    DEBUG: env === 'development',
    TEST: env === 'test',
    LOG_LEVEL: env === 'production' ? 'error' : 'debug'
  },
  globalModules: {
    React: 'react',
    log: 'shared/log',
  },
};

module.exports = (config) => {
  config = merge({}, defaultConfig, config);
  const { rootDir } = config;
  const local = file => path.resolve(rootDir, file);

  return {
    devtool: 'eval-source-map',
    entry: local(config.entry),
    output: {
      path: local(config.buildDir),
      filename: 'bundle.js',
    },
    resolve: {
      modules: [
        'node_modules',
        local('src'),
        path.join(clientsRootDir, 'Shared')
      ],
    },
    module: {
      rules: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        {test: /\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/, use: [
          {loader: 'file-loader'},
        ]},
        {
          test: /\.s?css$/,
          loader: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
              {loader: 'css-loader', options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[path]_[local]',
              }},
              {loader: 'sass-loader'},
              {loader: 'postcss-loader'},
            ],
          }),
        },
      ],
    },
    plugins: [
      new ExtractTextPlugin('style.css', { allChunks: true }),
      new webpack.ProvidePlugin(config.globalModules),
      new webpack.DefinePlugin(config.constants),
      new HtmlWebpackPlugin({
        hash: true,
        filename: 'index.html',
        template: './src/index.html',
      }),
    ],
    devServer: {
      port: config.devServerPort,
      proxy: {
        '/api': config.server
      },
    },
  };
};

正在运行的应用程序webpack.config.js：

module.exports = require('../webpack.base.config')(Object.assign(
  {rootDir: __dirname},
  require('./config'),
));

以及应用配置：

module.exports = {
  appId: 'com.company.app',
  server: 'http://localhost:8000',
  buildDir: 'www',
  devServerPort: 8080,
};

破碎的管理员webpack.config.js：

module.exports = require('../webpack.base.config')(Object.assign(
  {rootDir: __dirname},
  require('./config'),
));

还有管理员配置：

module.exports = {
  appId: 'com.company.app_admin',
  server: 'http://localhost:8000',
  buildDir: '../../Server/public/admin',
  devServerPort: 8081,
};

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

它最终成为某种文件夹重命名问题。当我在 Admin 文件夹中打开一个 iterm 会话时，我已经移动了整个项目并重新克隆。 iterm 或 zshell 都感到困惑，因为 pwd 显示了正确的路径，但 zshell 显示的分支不正确。运行 cd . 更正了 zshell 显示的分支，watch 脚本现在可以正常工作了。

所以真正的问题是我在错误的项目中运行 watch，即使我的 shell 告诉我我在正确的项目中。

【讨论】：

【解决方案2】：

我遇到了同样的问题，SimpleJ 的回答似乎给了我需要的提示。我有一个文件SomeFolder/someFile.js，但它被导入为../somefolder/somefile（全部小写）。

更改import 语句中的大小写以匹配实际文件夹和文件的大小写似乎已经解决了这个问题。

【讨论】：