diff --git a/en/faq/webpack-audio-files b/en/faq/webpack-audio-files new file mode 100644 index 000000000..c18742f8c --- /dev/null +++ b/en/faq/webpack-audio-files @@ -0,0 +1,52 @@ +--- +title: Loading audio files from assets directory +description: How to extend Webpack config to load audio files +--- + +# How to extend Webpack config to load audio files + +Audio files should be processed by `file-loader`. This loader is already included in the default Webpack configuration, but it is not set up to handle audio files. You need to extend its default configuration in `nuxt.config.js`: + +```js +export default { + build: { + extend(config, ctx) { + config.module.rules.push({ + test: /\.(ogg|mp3|wav|mpe?g)$/i, + loader: 'file-loader', + options: { + name: '[path][name].[ext]', + }, + }) + }, + } +} +``` + +You can now import audio files like this ``. + +If you only want to write: ``, you need to tell `vue-loader` to automatically require your audio files when you reference them with the `src` attribute: + +```js +export default { + build: { + loaders: { + vue: { + transformAssetUrls: { + audio: 'src', + }, + }, + }, + + extend(config, ctx) { + config.module.rules.push({ + test: /\.(ogg|mp3|wav|mpe?g)$/i, + loader: 'file-loader', + options: { + name: '[path][name].[ext]', + }, + }) + }, + }, +} +```