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",
	}
...

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