如何使用ContextReplacementPlugin消除引入winston日志库时的webpack警告？

最近在维护用Winston做日志的项目时，跑Webpack打包突然冒出一堆警告，折腾了好久才找到根源，分享给大家：

问题原因 #

这锅其实得甩给Winston依赖的logform包——它里面的exposeFormat函数用了懒加载机制，Webpack在分析依赖的时候，没法准确判断这个函数到底要加载哪些文件，索性就把所有相关文件都一股脑引入了，甚至包括README.md这种非JavaScript文件。更糟的是，Webpack还会尝试用TypeScript去处理这些文件，自然就触发一堆警告了。

亲测有效的解决方法 #

给大家几个实用的解决方案：

• 配置Webpack处理非JS文件：在Webpack配置的module.rules里，给markdown这类非必要文件单独设置规则，避免Webpack用TS去处理它们：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.md$/,
          type: 'asset/resource',
          generator: {
            filename: 'static/[name][ext]'
          }
        }
      ]
    }
  };
  

  或者直接让Webpack忽略这些文件（需要先安装ignore-loader：npm install ignore-loader --save-dev）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(md|txt)$/,
          loader: 'ignore-loader'
        }
      ]
    }
  };
  

• 升级logform版本：去检查下logform的最新版本，有时候官方会优化动态引入的写法，让Webpack能正确识别需要加载的文件，从根源上解决这个问题。
• Create React App项目适配：如果是用CRA搭建的项目没法直接修改Webpack配置，可以借助react-app-rewired和customize-cra工具，添加对非JS文件的处理规则，绕过CRA的配置限制。

内容的提问来源于stack exchange，提问作者Aneil Mallavarapu