Телеграмм чат группы webpack

webpack-cli 4.2.0
webpack 5.4.0

Alex CherryTea in Webpack — русскоговорящее сообщество

23:19пожаловаться #1

3bl3gamer

webpack-cli 4.2.0
webpack 5.4.0

ога вижу, в 5ом вебпаке какой-то встроеный лоадер специально для васма
https://webpack.js.org/configuration/output/#outputwasmloading

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Alex CherryTea in Webpack — русскоговорящее сообщество

23:21пожаловаться #2

настройки name я там не вижу к сожалению

Alex CherryTea in Webpack — русскоговорящее сообщество

23:22пожаловаться #3

3bl3gamer

для файл-луадера? пробовал test: /\.(png|svg|wasm)$/, не подхватватывает

а у тебя вот этот параметр задан?
https://webpack.js.org/configuration/output/#outputfilename

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

23:22пожаловаться #4

ога вижу, в 5ом вебпаке какой-то встроеный лоадер специально для васма
https://webpack.js.org/configuration/output/#outputwasmloading

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

видел, но не очень понял, что это и как работает. у меня он подключается просто:

const filepath = new URL('filename.wasm', import.meta.url).pathname

WebAssembly.instantiateStreaming(fetch(filepath), importObject)

т.е. фетч уже руками написан, от вебпака ничего особенного не требуется

23:23пожаловаться #5

а у тебя вот этот параметр задан?
https://webpack.js.org/configuration/output/#outputfilename

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

да, '[name].[contenthash:8].js'

Alex CherryTea in Webpack — русскоговорящее сообщество

23:25пожаловаться #6

я думаю тебе может помочь что-то типа

output: {
  filename :'[name].[contenthash].[ext]',
}

если нет, то

output: {
    filename: (pathData) => {
      const isWasm = pathData.chunk.type === 'wasm' // ну или типа того;
      return isWasm ? '[name].wasm': '[name].[contenthash:8].bundle.js';
    },
  }

Alex CherryTea in Webpack — русскоговорящее сообщество

23:25пожаловаться #7

но вобще говоря, если у тебя правильно настроен лоадер то должно быть до фонаря как он называется

Alex CherryTea in Webpack — русскоговорящее сообщество

23:27пожаловаться #8

чисто эстетические заморочки

23:27пожаловаться #9

чисто эстетические заморочки

ну... да :)
от части. не хочу потом выяснять (особенно если таких файлов станет больше) "а что это такое?", "а чего оно такое жирное?", "а кому оно здесь надо?" и т.д.

23:29пожаловаться #10

я думаю тебе может помочь что-то типа

output: {
  filename :'[name].[contenthash].[ext]',
}

если нет, то

output: {
    filename: (pathData) => {
      const isWasm = pathData.chunk.type === 'wasm' // ну или типа того;
      return isWasm ? '[name].wasm': '[name].[contenthash:8].bundle.js';
    },
  }

> pathData
что-то там про wasm вообще ничего не видно. я вывел pathData в лог и грепнул выхлоп

Alex CherryTea in Webpack — русскоговорящее сообщество

23:30пожаловаться #11

3bl3gamer

> pathData
что-то там про wasm вообще ничего не видно. я вывел pathData в лог и грепнул выхлоп

а что там вообще есть?

23:30пожаловаться #12

а что там вообще есть?

все чанки. по чанку для каждого entry, и ещё один общий а-ля vendor (так и задумано по splitChunks). васма там нет. да наверно и не должно быть: он-то ассет, а не чанк

Alex CherryTea in Webpack — русскоговорящее сообщество

23:33пожаловаться #13

@zblzgamer блин, ну тогда предлагаю пройтись по сырцам вебпака и найти строчку где формируется имя ассета

Alex CherryTea in Webpack — русскоговорящее сообщество

23:34пожаловаться #14

начинать можно например отсюда
https://github.com/vanungit/Webpack/blob/185cf67cb40077c8607f45a0e5f4ef001299646b/node_modules/webpack/lib/web/FetchCompileWasmPlugin.js

https://github.com/webpack/webpack/search?q=wasmLoading

GitHub

vanungit/Webpack

Contribute to vanungit/Webpack development by creating an account on GitHub.

Alex CherryTea in Webpack — русскоговорящее сообщество

23:34пожаловаться #15

@zblzgamer
https://github.com/webpack/webpack/blob/af52c8f0457b1055098d6b7b545b257404d06c93/lib/wasm-async/AsyncWasmChunkLoadingRuntimeModule.js#L27
смотри

GitHub

webpack/webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", module...

Alex CherryTea in Webpack — русскоговорящее сообщество

23:49пожаловаться #16

webassemblyModuleFilename параметр называется

23:50пожаловаться #17

webassemblyModuleFilename параметр называется

тоже видел, какой-то старнный параметр. вроде в сорцах есть, в доках нет. ну и

webassemblyModuleFilename: '[hash:8].wasm'

не изменило название

Alex CherryTea in Webpack — русскоговорящее сообщество

23:52пожаловаться #18

ну значит надо смотреть откуда он появляется в сеттингах

23:52пожаловаться #19

эврика блин!

output: {
  assetModuleFilename: '[name].[hash:8][ext]',