{"id":26470223,"url":"https://github.com/nextcloud-libraries/webpack-vue-config","last_synced_at":"2025-04-09T21:14:33.022Z","repository":{"id":37050752,"uuid":"206507964","full_name":"nextcloud-libraries/webpack-vue-config","owner":"nextcloud-libraries","description":"This is a base webpack configuration to use with Nextcloud apps https://npmjs.org/@nextcloud/webpack-vue-config","archived":false,"fork":false,"pushed_at":"2025-04-09T06:28:34.000Z","size":5693,"stargazers_count":8,"open_issues_count":3,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-09T21:14:27.149Z","etag":null,"topics":["config","configuration","nextcloud","vue","vuejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextcloud-libraries.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-05T07:59:19.000Z","updated_at":"2025-04-09T06:28:13.000Z","dependencies_parsed_at":"2023-08-28T16:45:56.995Z","dependency_job_id":"de32fb54-d34e-4408-b23c-1775cfc4e7eb","html_url":"https://github.com/nextcloud-libraries/webpack-vue-config","commit_stats":null,"previous_names":["nextcloud-libraries/webpack-vue-config","nextcloud/webpack-vue-config"],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fwebpack-vue-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fwebpack-vue-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fwebpack-vue-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud-libraries%2Fwebpack-vue-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextcloud-libraries","download_url":"https://codeload.github.com/nextcloud-libraries/webpack-vue-config/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111972,"owners_count":21049578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["config","configuration","nextcloud","vue","vuejs","webpack"],"created_at":"2025-03-19T18:36:42.215Z","updated_at":"2025-04-09T21:14:33.015Z","avatar_url":"https://github.com/nextcloud-libraries.png","language":"JavaScript","readme":"\u003c!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n--\u003e\n# Webpack vue base config\n\n[![REUSE status](https://api.reuse.software/badge/github.com/nextcloud-libraries/webpack-vue-config)](https://api.reuse.software/info/github.com/nextcloud-libraries/webpack-vue-config)\n[![npm last version](https://img.shields.io/npm/v/@nextcloud/webpack-vue-config.svg?style=flat-square)](https://www.npmjs.com/package/@nextcloud/webpack-vue-config)\n[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true\u0026style=flat-square\u0026logo=dependabot)](https://dependabot.com)\n\nUse this base config package to cleanup all your complicated setups and rely on automated dependencies updates.\n\n## How-to\n```js\n// webpack.config.js\n\nconst webpackConfig = require('@nextcloud/webpack-vue-config')\n\nmodule.exports = webpackConfig\n```\n\n```js\n// package.json\n\n...\n\t\"scripts\": {\n\t\t\"build\": \"webpack --node-env production --progress\",\n\t\t\"dev\": \"webpack --node-env development --progress\",\n\t\t\"watch\": \"webpack --node-env development --progress --watch\",\n\t\t\"serve\": \"webpack --node-env development serve --progress\",\n\t}\n...\n```\n\n## Note on Vue 2 support\n\nThis package supports both **Vue 2** and **Vue 3** by installing legacy `vue-loader` for Vue 2 in a `postinstall` script.\n\nIn Vue 2 it may result in different `vue-loader` version in the `package-lock.json` and `node_modules`.\n\n### Troubleshooting in Vue 2 apps\n\nIn case of `npm error code ENOTEMPTY` - remove `node_modules` and try again:\n\n```sh\n# In case of \"npm error code ENOTEMPTY\" in Vue 2\nrm -rf node_modules\n```\n\nTo avoid any errors and have explicitly specified `vue-loader` - install it as dependency:\n\n```sh\n# Install legacy vue-loader for Vue 2\nnpm i -D vue-loader@legacy\n```\n\n## Hot module replacement\n\nTo enjoy hot module replacement, follow those instructions:\n\n- Install the [`HMREnabler`](https://github.com/nextcloud/hmr_enabler) server app. This will tweak the CSP header so do not use it in production !\n- Add the `serve` script to your `package.json` as listed above.\n- Add `js/*hot-update.*` to you `.gitignore`. This is necessary because we write every files on disk so the nextcloud server can serve them.\n- Add the following line in your Vue app entry file so Webpack knows where to fetch updates, [see this example](https://github.com/nextcloud/app-tutorial/blob/master/src/main.js). You might not need it as it default to `/apps/\u003cyour_app_name\u003e/js/`.\n\n```js\n__webpack_public_path__ = generateFilePath(appName, '', 'js/')\n```\n\nYou can then start you dev serve with `npm serve` or `make serve-js` if you added this step in your makefile.\n\n- Your Nextcloud server hostname will probably be different than `localhost`. In that case, you will need specify it with `--allowed-hosts`.\n- Your public path will probably not be `/apps/{app-name}/js`. In that case, you will need to specify it with `--static-public-path`.\n\n```shell\nnpm run serve -- --allowed-hosts your-hostname.example [other-hostname.example ...] --static-public-path /your/custom/public/path\n```\n\n## Extend with your own configs\n\nHere is an example on how to add your own  config to the base one\n\n```js\n// webpack.config.js\n\nconst path = require('path')\nconst webpack = require('webpack')\nconst webpackConfig = require('@nextcloud/webpack-vue-config')\n\nwebpackConfig.entry['files-action'] = path.join(__dirname, 'src', 'files_action.js')\nwebpackConfig.plugins.push(new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/))\n\nmodule.exports = webpackConfig\n```\n### Replace/edit existing rule\nAll the rules are available individually on the `@nextcloud/webpack-vue-config/rules` file. You can import them and use the one you want.\n\nIf you want to override a rule that is already provided by this package, you can use the following to replace it:\n\n```js\n// webpack.config.js\n\nconst webpackConfig = require('@nextcloud/webpack-vue-config')\nconst webpackRules = require('@nextcloud/webpack-vue-config/rules')\n\nconst BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')\n\n// Edit JS rule\nwebpackRules.RULE_JS.test = /\\.m?js$/\nwebpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([\n\t'@nextcloud/dialogs',\n\t'@nextcloud/event-bus',\n\t'camelcase',\n\t'fast-xml-parser',\n\t'hot-patcher',\n\t'semver',\n\t'vue-plyr',\n\t'webdav',\n\t'toastify-js',\n])\n\n// Replaces rules array\nwebpackConfig.module.rules = Object.values(webpackRules)\n\nmodule.exports = webpackConfig\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcloud-libraries%2Fwebpack-vue-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextcloud-libraries%2Fwebpack-vue-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcloud-libraries%2Fwebpack-vue-config/lists"}