@nextcloud/webpack-vue-config v6.3.0

Webpack vue base config

Use this base config package to cleanup all your complicated setups and rely on automated dependencies updates.

How-to

// webpack.config.js

const webpackConfig = require('@nextcloud/webpack-vue-config')

module.exports = webpackConfig

// 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:

# 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:

# 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 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. You might not need it as it default to /apps/<your_app_name>/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.

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

// 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:

// 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