Question

我有一个项目分为3个部分：一个服务器和两个webpack捆绑的Web客户端（App和Admin）。这两个Web客户端使用基本相同的webpack配置，稍微更改设置输出目录和开发服务器端口。每个客户都有自己的package.json，其中watch脚本只运行webpack-dev-server。

两个客户端上的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,
};

Answer 1

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

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

Answer 2

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

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

文件更改时，Webpack dev服务器不会重新编译

2 个答案: