Separate additionnal JS bundle with NuxtJS

Viewed 146

I Would like to create a NuxtJS module that generates & bundles a custom script and places it in the static/my-script.js.

My current folder structure is as follows:

- modules/
  - my-module/
     - index.js
     - plugin.js
     - my-script.js
- nuxt.config.js (contains buildModules: ['~/modules/my-module'])

I would like to build & bundle my-script.js as a single, standalone, JS bundle located in /static/my-script.js.

The only thing I was able to do until now is to use the addTemplate function but this will not build the file into its own bundle:

this.nuxt.hook('build:before', async () => {
  this.addTemplate({
    src: resolve(__dirname, 'my-script.js'),
    fileName: resolve(this.options.srcDir, this.options.dir.static || 'static', 'my-script.js'),
    ssr: false,
  })
})

I also tried to add a custom webpack config, but it seems to be ignored completely (at least in dev mode):

this.nuxt.hook('webpack:config', async webpackConfigs => {
  const clientConfig = webpackConfigs.find(config => config.name === 'client')
  webpackConfigs.push({
    name: 'my-script',
    entry: resolve(__dirname, 'my-script.js'),
    output: {
      path: resolve(this.options.srcDir, this.options.dir.static || 'static'),
      filename: 'my-script.js',
    },
    resolve: clientConfig.resolve,
    resolveLoader: clientConfig.resolveLoader,
  })
})

I would like to be able to use both addTemplate and compile/bundle, in order to be able to inject options in the template before it is built.

0 Answers
Related