How to use case-sensitive-paths-webpack-plugin - 10 common examples

const tsOptions = getTSCommonConfig();

  const plugins = [
    new FilterWarningsPlugin({
      exclude: /.*@choerodon.*/,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),
    new ExtractTextPlugin({
      filename: cssFileName,
      disable: false,
      allChunks: true,
    }),
    new CaseSensitivePathsPlugin(),
    new webpack.ProgressPlugin((percentage, msg, addInfo) => {
      const stream = process.stderr;
      if (stream.isTTY) {
        if (stream.isTTY && percentage < 0.71) {
          stream.cursorTo(0);
          stream.write(`📦  ${chalk.magenta(msg)} (${chalk.magenta(addInfo)})`);
          stream.clearLine(1);
        } else if (percentage === 1) {
          // eslint-disable-next-line no-console
          console.log(chalk.green('\nwebpack: bundle build is now finished.'));
        }
      } else {
        const outputStr = '📦  bundleing!';
        if (percentage !== 1 && !processTimer) {
          // eslint-disable-next-line no-console
          console.log(`📦  bundleing!  ${new Date()}`);

// eslint-disable-line
          isDev ? 'development' : 'production',
        ), // eslint-disable-line
        'process.env.HMR': process.env.HMR,
        // 给 socket server 用
        ...(process.env.SOCKET_SERVER
          ? {
              'process.env.SOCKET_SERVER': JSON.stringify(
                process.env.SOCKET_SERVER,
              ),
            }
          : {}),
        ...stringifyObject(opts.define || {}),
      }),
      ...(opts.html ? [new HTMLWebpackPlugin(opts.html)] : []),
      new CaseSensitivePathsPlugin(),
      new webpack.LoaderOptionsPlugin({
        options: {
          context: __dirname,
        },
      }),
      new ProgressPlugin(),
      ...(process.env.TS_TYPECHECK ? [new ForkTsCheckerWebpackPlugin()] : []),
      ...(opts.ignoreMomentLocale
        ? [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
        : []),
      ...commonsPlugins,
      ...copyPlugins,
      ...(process.env.ANALYZE
        ? [
            new BundleAnalyzerPlugin({
              analyzerMode: 'server',

export function createPlugins(
  server: ServerConfig,
  buildConfig: Object = {},
  userConfig: Object = {}
): {optimization: Object, plugins: Object[]} {
  let production = process.env.NODE_ENV === 'production'

  let optimization = {}
  let plugins = [
    // Enforce case-sensitive import paths
    new CaseSensitivePathsPlugin(),
    // Replace specified expressions with values
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      ...buildConfig.define,
      ...userConfig.define,
    }),
    // XXX Workaround until loaders migrate away from using this.options
    new webpack.LoaderOptionsPlugin({
      options: {
        context: process.cwd()
      }
    })
  ]

  if (server) {
    // HMR is enabled by default but can be explicitly disabled

path.join(bundle.assetsDir || '', 'chunk-manifest.json'),
        ),
        __ASSETS_MANIFEST__: JSON.stringify(
          path.join(bundle.assetsDir || '', 'assets-manifest.json'),
        ),
        'process.browser': JSON.stringify(false),
        'process.server': JSON.stringify(true),
      }),
    ]),
  };

  if (_DEV) {
    nodeConfig.stats = 'none';
    nodeConfig.watch = true;
    nodeConfig.plugins.push(
      new CaseSensitivePathsPlugin(),
      new LoggerPlugin({
        verbose: bundle.verbose,
        target: 'server',
      }),
      new CircularDependencyPlugin({
        exclude: /a\.js|node_modules/,
        // show a warning when there is a circular dependency
        failOnError: false,
      }),
    );
  }
  return nodeConfig;
}

extensions: [
        ".mjs",
        ".js",
        ".jsx",
        ".ts",
        ".tsx",
        ".css",
        ".sss",
        ".json"
      ]
    },

    plugins: removeEmpty([
      // Enforces the entire path of all required modules match the exact case of the actual path on disk.
      // https://github.com/Urthen/case-sensitive-paths-webpack-plugin
      new CaseSensitivePathsPlugin(),

      // Improve source caching in Webpack v2.
      // Therefor we disable it in production and only use it to speed up development rebuilds.
      //
      //
      enableHardSource ? new HardSourceWebpackPlugin({
        // Either an absolute path or relative to output.path.
        cacheDirectory: path.resolve(root, ".hardsource", `${target}-${mode}`),

        // Either an absolute path or relative to output.path. Sets webpack's
        // recordsPath if not already set.
        recordsPath: path.resolve(root, ".hardsource", `${target}-${mode}`, "records.json"),

        // Optional field. This field determines when to throw away the whole
        // cache if for example npm modules were updated.
        environmentHash: {

// the requesting resource.
      new ModuleNotFoundPlugin(locations.root),

      new ExpoDefinePlugin({
        mode,
        publicUrl,
        config,
        productionManifestPath: locations.production.manifest,
      }),

      // This is necessary to emit hot updates (currently CSS only):
      isDev && new HotModuleReplacementPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebook/create-react-app/issues/240
      isDev && new CaseSensitivePathsPlugin(),

      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isDev && new WatchMissingNodeModulesPlugin(locations.modules),

      isProd &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),

      // Generate a manifest file which contains a mapping of all asset filenames

loaders: [
          {
            path: require.resolve('babel-loader'),
            query: {
              babelrc: false,
              cacheDirectory: _IS_DEV_,
              compact: _IS_PROD_,
              presets: [_IS_CLIENT_ ? clientPreset : serverPreset],
            },
          },
        ],
      }),

      // Improve OS compatibility
      // https://github.com/Urthen/case-sensitive-paths-webpack-plugin
      new CaseSensitivePathsPlugin(),

      _IS_DEV_
        ? new CircularDependencyPlugin({
            exclude: /a\.js|node_modules/,
            // show a warning when there is a circular dependency
            failOnError: false,
          })
        : null,

      _IS_DEV_
        ? new WriteFilePlugin({
            exitOnErrors: false,
            log: true,
            // required not to cache removed files
            useHashIndex: false,
          })

},

    optimization: {
      minimizer: [
        new TerserPlugin({
          parallel: true,
          cache: true,
        }),
      ],
    },

    plugins: [
      new MiniCssExtractPlugin({
        filename: cssFileName,
      }),
      new CaseSensitivePathsPlugin(),
      new WebpackBar({
        name: '🚚  Bisheng',
        color: '#2f54eb',
      }),
      new FriendlyErrorsWebpackPlugin(),
      new CleanUpStatsPlugin(),
    ],
  };
}

/**
         * Fixes a known issue with cross-platform differences in file watchers,
         * so that webpack doesn't lose file changes when watched files change rapidly
         * https://github.com/webpack/webpack-dev-middleware#known-issues
         *
         * @env development
         */
        ifDevelopment(new TimeFixPlugin(), undefined),
        /**
         * Watcher doesn"t work well if you mistype casing in a path so we use
         * a plugin that prints an error when you attempt to do this.
         * See https://github.com/facebookincubator/create-react-app/issues/240
         *
         * @env development
         */
        ifDevelopment(new CaseSensitivePathsPlugin(), undefined),
        /**
         * Moment.js is an extremely popular library that bundles large locale files
         * by default due to how Webpack interprets its code. This is a practical
         * solution that requires the user to opt into importing specific locales.
         * @url https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
         * @env all
         */
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        /**
         * Define environmental variables base on entry point
         * @description Provides entry point specific env variables
         *
         * @env all
         */
        new webpack.EnvironmentPlugin({
            NAME: name,

pathinfo: options.development,
            path: path.resolve(options.outputPath),
            filename: `${options.filenames}.js`,
        },
        plugins: objectPath.get(options, 'plugins', []),
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.common.js',
            },
        },
        module: {
            rules: objectPath.get(options, 'module.rules', []),
        },
    });

    config.plugins.push(plugins.define, new CaseSensitivePathsPlugin());

    if (!options.development) {
        config = config.merge({
            devtool: false,
            output: {
                pathinfo: false,
            },
            plugins: [
                new webpack.LoaderOptionsPlugin({ debug: false }),
                new CleanPlugin(options.outputPath, process.cwd()),
            ],
        });
    }

    return config;
}