This content originally appeared on DEV Community and was authored by Marcin Wosinek
If you worked with webpack, you know how confusing it's configuration can become. Because of this, many frameworks & code generators abstract it away from the application developer. It works nice in simple case - like demo apps, but can become painful in when we want to customize the set up. Not only we have to know webpack & it's loaders, but on top of that we need to the quirky way of changing the config, without breaking the framework.
Application
The example application we have here, was created following the npm example for getting started doc
$ npm init nuxt-app webpack-nuxt
The code created by this command you can find here:
https://github.com/marcin-wosinek/webpack-nuxt/tree/eb44c5a85eaf421b50bfe53b9e07b7e27e4ec34c
As of now, we are limited to webpack in version 4 - it's previous version. And based on this discussion you shouldn't expect update to webpack 5 before major release of nuxt.
Adding loaders
As you can see on extend webpack config, the correct place to tweak webpack config is nuxt.config.js. Let's say we want to load .weird files as just a string. In webpack it's achieved with raw-loader.
You should add inside export default { of nuxt.config.js following code:
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extend(config) {
config.module.rules.push({
test: /\.weird$/,
loader: "raw-loader"
});
}
}
Note! We are pushing new object to config.module.rules. If we were overriding the whole array, we would drop all the rules defined by the framework, therefore break our build.
Most likely this will fail, so you should install the raw-loader:
$ npm install --save-dev raw-loader
With all that in place, you should be able to have pages/index.vue:
<template>
<div>
{{ info }}
</div>
</template>
<script>
import info from "./raw.weird";
export default {
async asyncData() {
return { info };
}
};
</script>
loading content from a raw.weird file next to it.
Summary
In this article, we have seen how to customize which loader is used for a given file extension in nuxt. If you want to see the whole code base, you can find it here:
https://github.com/marcin-wosinek/webpack-nuxt
This content originally appeared on DEV Community and was authored by Marcin Wosinek
Marcin Wosinek | Sciencx (2021-07-02T20:22:45+00:00) How to add loader to NuxtJs configuration. Retrieved from https://www.scien.cx/2021/07/02/how-to-add-loader-to-nuxtjs-configuration/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.