Как установить ключевые префиксы в файле webpack4 manifest.json для * ALL * .js, .css & .png ресурсов? - PullRequest
Новая
       38

Как установить ключевые префиксы в файле webpack4 manifest.json для * ALL * .js, .css & .png ресурсов?

0 голосов
/ 02 сентября 2018

Я начинаю с Webpack

Я установил webpack@4.17.1

У меня есть генерация собранных файлов js & css и перемещение файлов img

Когда я запускаю webpack, я получаю 

pub/bld/
├── css
│   └── common.css
├── img
│   └── image.jpg
└── js
    └── common.js

Теперь я хочу сгенерировать manifest.json

Я установил webpack-manifest-plugin@2.0.3

Я настроил 

const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = () => ({
    plugins: [
        new ManifestPlugin({
            fileName: 'manifest.json',
        })
    ]
});

Теперь, когда я запускаю webpack, файл manifest.json добавляется 

pub/bld/
├── css
│   └── common.css
├── img
│   └── image.jpg
├── js
│   ├── runtime_manifest.js
│   └── common.js
└── manifest.json

Для этих файлов генерируется этот manifest.json 

{
  "common.css": "css/common.css",
  "common.js":  "js/common.js",
  "runtime_manifest.js": "js/runtime_manifest.js",
  "img/image.jpg": "img/image.jpg",
}

Я не понимаю, почему ключ манифеста файла '* .img' имеет префикс «img /» но клавиши '* .js' & '* .css' этого не делают.

Я хочу получить что-то непротиворечивое, например 

{
  "css/common.css": "css/common.css",
  "js/common.js":  "js/main.js",
  "js/runtime_manifest.js": "js/runtime_manifest.js",
  "img/image.jpg": "img/image.jpg",
}

Полагаю, ему нужен другой конфиг.

Не знаю, как это сделать.

Что мне нужно добавить или изменить в моей конфигурации?

Ценю любую помощь!

EDIT1: 

git clone https://github.com/atown2/wt1
cd wt1
yarn install
rm -rf pub/bld
yarn run w-d
cat pub/bld/manifest.json
    {
      "common.css": "bld/css/common.css",
      "common.js": "bld/js/common.js",
      "runtime_manifest.js": "bld/js/runtime_manifest.js",
      "vendor.js": "bld/js/vendor.js",
      "img/image.jpg": "bld/img/image.jpg"
    }
rm -rf pub/bld
yarn run w-p
cat pub/bld/manifest.json
    {
      "common.css": "bld/css/common.29a2491a64f9fa0bb242.css",
      "common.js": "bld/js/common.06c02ae762fab74de1c2.js",
      "vendor.js": "bld/js/vendor.f8169ef54a3835cf9193.js",
      "runtime_manifest.js": "bld/js/runtime_manifest.f4c47723a9293e3db34d.js",
      "img/image.jpg": "bld/img/image.e910e1baeaab6869d39e369296aad8f5.jpg"
    }

1 Ответ

0 голосов
/ 16 сентября 2018

Проблема в том, что плагин манифеста выбирает имена на основе записи. Для настройки используйте map: 

exports.Manifest = () => ({
  plugins: [
    new WebpackManifest({
      fileName: 'manifest.json',
      filter: (file) => !file.path.match(/\.map$/),
      map: (file) => {
        const extension = path.extname(file.name).slice(1)

        return {
          ...file,
          name: ['css', 'js'].includes(extension) ?
            `${extension}/${file.name}` :
             file.name
        }
      }
    })
  ]
});
...