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.

If your nextcloud hostname is different from localhost, you need to start the server like so:

npm run serve -- --allowed-hosts your-hostname.example

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

niveshkrishna / webpack-vue-config Goto Github PK

webpack-vue-config's Introduction

Webpack vue base config

How-to

Hot module replacement

Extend with your own configs

Replace/edit existing rule

webpack-vue-config's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent