Блог

Я использую css-loader и style-loader с Webpack. Как и ожидалось, style теги добавляются в head документ, но, похоже, нет никакого способа определить, какой импорт привел к данному тегу стиля. Насколько я понимаю, css-loader он отвечает за чтение фактических файлов css из импорта, поэтому кажется, что это должно быть настроено с помощью этого загрузчика. Я не могу найти ничего, что сделало бы это возможным на основе этих документов: https://webpack.js.org/loaders/css-loader /

Я предполагаю, что существуют существующие плагины и загрузчики для решения упомянутых мною задач, но я не смог их найти. Я смог заставить этот пользовательский загрузчик работать: в projectRoot/web_loaders/css-module-path-includer.js :

 module.exports = function (content) {
    return [
        `/* resource: ${this.resource} */`,
        content
    ].join('n')
}
 

Обновления для webpack.config.js :

 module.exports = {
   ...
   resolveLoader: {
     modules: [ 'node_modules', path.resolve(__dirname, "./web_loaders") ],
   },
   rules: [
      {
        test: /.css$/i,
        use: [
          'style-loader',
          'css-loader',
          'css-module-path-includer'
        ],
      }
   ]
}
 

что дает вам:

и затем вы можете использовать что-то вроде этого, чтобы отследить, какой модуль в вашем исходном коде в конечном итоге привел к импорту: run

 npx webpack --profile --json > stats.json
 

в выводе был вывод до и после фактического json, который мне пришлось отредактировать. Вероятно, есть аргумент, который приводит к печати только json.

в find_dependency_root.py

 import json
import sys

stats = json.loads(open('stats.json').read())
dependency = sys.argv[1]
visited = {}
dependency_chain = [dependency]
while True:
    module = next(module for module in stats['modules']
                  if dependency in str(module['id']))
    # try to account for circular dependencies
    if module['issuerId'] != 0 and dependency not in visited:
        visited[dependency] = True
        dependency = module['issuerId']
        dependency_chain.insert(0, dependency)
    else:
        print('n'.join(dependency_chain))
        break

 

 python3 find_dependency_root.py antd/lib/popover/style/index.css
 

 ./src/main/resources/static/js/Root.tsx
...
./node_modules/antd/lib/popconfirm/style/css.js
./node_modules/antd/lib/popover/style/css.js
antd/lib/popover/style/index.css