https://github.com/nextcloud-libraries/webpack-vue-config
This is a base webpack configuration to use with Nextcloud apps https://npmjs.org/@nextcloud/webpack-vue-config
https://github.com/nextcloud-libraries/webpack-vue-config
config configuration nextcloud vue vuejs webpack
Last synced: about 1 year ago
JSON representation
This is a base webpack configuration to use with Nextcloud apps https://npmjs.org/@nextcloud/webpack-vue-config
- Host: GitHub
- URL: https://github.com/nextcloud-libraries/webpack-vue-config
- Owner: nextcloud-libraries
- License: agpl-3.0
- Created: 2019-09-05T07:59:19.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-04-09T06:28:34.000Z (about 1 year ago)
- Last Synced: 2025-04-09T21:14:27.149Z (about 1 year ago)
- Topics: config, configuration, nextcloud, vue, vuejs, webpack
- Language: JavaScript
- Homepage:
- Size: 5.43 MB
- Stars: 8
- Watchers: 6
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Authors: AUTHORS.md
Awesome Lists containing this project
README
# Webpack vue base config
[](https://api.reuse.software/info/github.com/nextcloud-libraries/webpack-vue-config)
[](https://www.npmjs.com/package/@nextcloud/webpack-vue-config)
[](https://dependabot.com)
Use this base config package to cleanup all your complicated setups and rely on automated dependencies updates.
## How-to
```js
// webpack.config.js
const webpackConfig = require('@nextcloud/webpack-vue-config')
module.exports = webpackConfig
```
```js
// package.json
...
"scripts": {
"build": "webpack --node-env production --progress",
"dev": "webpack --node-env development --progress",
"watch": "webpack --node-env development --progress --watch",
"serve": "webpack --node-env development serve --progress",
}
...
```
## Note on Vue 2 support
This package supports both **Vue 2** and **Vue 3** by installing legacy `vue-loader` for Vue 2 in a `postinstall` script.
In Vue 2 it may result in different `vue-loader` version in the `package-lock.json` and `node_modules`.
### Troubleshooting in Vue 2 apps
In case of `npm error code ENOTEMPTY` - remove `node_modules` and try again:
```sh
# In case of "npm error code ENOTEMPTY" in Vue 2
rm -rf node_modules
```
To avoid any errors and have explicitly specified `vue-loader` - install it as dependency:
```sh
# Install legacy vue-loader for Vue 2
npm i -D vue-loader@legacy
```
## Hot module replacement
To enjoy hot module replacement, follow those instructions:
- Install the [`HMREnabler`](https://github.com/nextcloud/hmr_enabler) server app. This will tweak the CSP header so do not use it in production !
- Add the `serve` script to your `package.json` as listed above.
- Add `js/*hot-update.*` to you `.gitignore`. This is necessary because we write every files on disk so the nextcloud server can serve them.
- 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//js/`.
```js
__webpack_public_path__ = generateFilePath(appName, '', 'js/')
```
You can then start you dev serve with `npm serve` or `make serve-js` if you added this step in your makefile.
- Your Nextcloud server hostname will probably be different than `localhost`. In that case, you will need specify it with `--allowed-hosts`.
- Your public path will probably not be `/apps/{app-name}/js`. In that case, you will need to specify it with `--static-public-path`.
```shell
npm run serve -- --allowed-hosts your-hostname.example [other-hostname.example ...] --static-public-path /your/custom/public/path
```
## Extend with your own configs
Here is an example on how to add your own config to the base one
```js
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const webpackConfig = require('@nextcloud/webpack-vue-config')
webpackConfig.entry['files-action'] = path.join(__dirname, 'src', 'files_action.js')
webpackConfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
module.exports = webpackConfig
```
### Replace/edit existing rule
All the rules are available individually on the `@nextcloud/webpack-vue-config/rules` file. You can import them and use the one you want.
If you want to override a rule that is already provided by this package, you can use the following to replace it:
```js
// webpack.config.js
const webpackConfig = require('@nextcloud/webpack-vue-config')
const webpackRules = require('@nextcloud/webpack-vue-config/rules')
const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
// Edit JS rule
webpackRules.RULE_JS.test = /\.m?js$/
webpackRules.RULE_JS.exclude = BabelLoaderExcludeNodeModulesExcept([
'@nextcloud/dialogs',
'@nextcloud/event-bus',
'camelcase',
'fast-xml-parser',
'hot-patcher',
'semver',
'vue-plyr',
'webdav',
'toastify-js',
])
// Replaces rules array
webpackConfig.module.rules = Object.values(webpackRules)
module.exports = webpackConfig
```