webpack - 使用 NuxtJS 分离附加的 JS 包

Question

我想创建一个 NuxtJS 模块，该模块生成和捆绑自定义脚本并将其放置在static/my-script.js.

我当前的文件夹结构如下：

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

我想将 & 捆绑my-script.js为一个单独的、独立的 JS 捆绑包，位于/static/my-script.js.

到目前为止，我唯一能做的就是使用该addTemplate函数，但这不会将文件构建到它自己的包中：

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,
  })
})

我还尝试添加自定义 webpack 配置，但它似乎被完全忽略（至少在开发模式下）：

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,
  })
})

我希望能够同时使用addTemplate和编译/捆绑，以便能够在模板构建之前在模板中注入选项。

标签： webpacknuxt.js