@nextcloud/webpack-vue-config

6.0.1 • Public • Published

npm last version Dependabot status

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

Package Sidebar

Install

npm i @nextcloud/webpack-vue-config

Weekly Downloads

6,547

Version

6.0.1

License

AGPL-3.0-or-later

Unpacked Size

65.6 kB

Total Files

7

Last publish

Collaborators

  • susnux
  • pytal
  • gretadoci
  • mejo-
  • artonge
  • max-nextcloud
  • st3iny
  • marcoambrosinii
  • icewind1991
  • skjnldsv
  • christophwurst
  • juliushaertl
  • nickvergessen