Кастомизация пути к файлам и группам файлов Webpack
Можно задать путь к файлам ассетов в папке сборки. Это делается с помощью настройки assetModuleFilename
. В этой настройке мы можем указать папку, куда складываются ассеты, а также шаблон имени файла.
[name]
обозначает имя файла[hash]
хеш[ext]
расширение начального файла
webpack.config.jsexport default {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve("dist"),
// настройка
assetModuleFilename: "assets/[name].[hash][ext]",
},
module: {
rules: [
{
test: /\.png$/,
type: "asset/resource",
},
],
},
plugins: [new HtmlWebpackPlugin()],
};
Кастомизация пути к группам
Можно задавать путь для сохранения для каждой группы ассетов. Это делается с помощью настройки generator
, указываемой для каждой группы:
webpack.config.jsexport default {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve("dist"),
},
module: {
rules: [
{
test: /\.png$/,
type: "asset/resource",
generator: {
filename: "images/[name].[hash][ext]",
},
},
],
},
plugins: [new HtmlWebpackPlugin()],
};