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.jsconstwebpackConfig=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. While Vue 3 is supported by default, Vue 2 requires an explicit legacy vue-loader installation:

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.jsconstpath=require('path')constwebpack=require('webpack')constwebpackConfig=require('@nextcloud/webpack-vue-config')webpackConfig.entry['files-action']=path.join(__dirname,'src','files_action.js')webpackConfig.plugins.push(newwebpack.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.jsconstwebpackConfig=require('@nextcloud/webpack-vue-config')constwebpackRules=require('@nextcloud/webpack-vue-config/rules')constBabelLoaderExcludeNodeModulesExcept=require('babel-loader-exclude-node-modules-except')// Edit JS rulewebpackRules.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 arraywebpackConfig.module.rules=Object.values(webpackRules)module.exports=webpackConfig