Rollup Config with : es6 ( Babel ) / Dynamic CodeSplitting / Stylus / Paths setup / LiveReload / Minifiers / esm export / ..

rollup.config.js

// ROLLUP CONFIG from @makio64

//-------------------------------------------------------------------------- PLUGINS
import includePaths from 'rollup-plugin-includepaths'
import rootImport from 'rollup-plugin-root-import'
import resolve from 'rollup-plugin-node-resolve'
import builtins from 'rollup-plugin-node-builtins'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'

import html from 'rollup-plugin-html'
import stylus from 'rollup-plugin-stylus-compiler'
import postcss from 'rollup-plugin-postcss'

import browsersync from 'rollup-plugin-browsersync'
// import livereload from 'rollup-plugin-livereload'

import visualizer from 'rollup-plugin-visualizer'

import { terser } from "rollup-plugin-terser"
// import minify from 'rollup-plugin-babel-minify'

//-------------------------------------------------------------------------- PATHS
const JS_PATH = `${__dirname}/src/js/**`
const STYLUS_PATH = `${__dirname}/src/styl/**`
const NODE_PATH = `${__dirname}/node_modules/**`

//-------------------------------------------------------------------------- CONFIG
export default {

	experimentalCodeSplitting : true,
	input: 'src/js/Preloader.js',
	
	output: {
		name: 'bundle.js',
		entryFileNames :'bundle.js',
		globals: 'bundle',
		// file: 'app/bin/bundle.js',
		dir: 'app/bin/',
		format: 'esm'
	},
	// onwarn (warning, warn) {
	// 	if (warning.message.indexOf(' is imported by')!=-1) return;
	// 	warn(warning);
	// },
	
	plugins: [ 
		includePaths({
			include: {},
			paths: [JS_PATH, STYLUS_PATH],
			external: [],
			extensions: ['.js', '.json', '.html', '.styl']
		}),
		rootImport({
      root: [`${__dirname}/src/js/`],
      useEntry: 'prepend',
			extensions: '.js'
		}),
		resolve({
			module: true,
      jsnext: true,
      // main: true,
      browser: true,
      preferBuiltins: false,
		}),
		postcss({
			modules: false,
			namedExports: false,
			minimize: true,
			// extract: 'css/extracted.css/',
			sourceMap: 'inline'
		}),
		html({
			include: '**/*.html',
			htmlMinifierOptions: {
				collapseWhitespace: true,
				collapseBooleanAttributes: true,
				conservativeCollapse: true,
				minifyJS: true
			}
		}),
		builtins(),
		babel({
			exclude: 'node_modules/**',
			include: "src/js/**",
			babelrc: false,
    	presets: [
				// ['es2015', { modules: false, loose: true }],
				['env', { //======================> smaller build for all modern browsers ( > 97% )
					modules: false,
					useBuiltIns: true,
					targets: {
						browsers: [
							'Chrome >= 60',
							'Safari >= 10.1',
							'iOS >= 10.3',
							'Firefox >= 54',
							'Edge >= 15',
						],
					},
				}],
				["stage-0"],
			],
			externalHelpers: true,
			plugins: [
				"external-helpers",
				["module-resolver", {
					"root": [JS_PATH, STYLUS_PATH],
					"alias": {}
				}]
			]
		}),
		commonjs(),
		terser(),
		// minify({
		// 	comments: false,
		// 	sourceMap: false
		// }),
		browsersync({
			host: 'localhost', 
			port: 9000, 
			server: {
				baseDir: ['./app','./src']
			},
			files: [
				"app/css/**/*.css",
				"app/bin/*.js",
				"app/vendors/*.js",
				"app/*.html"
			],
			open:true
		}),
		// livereload({
		// 	watch: 'app',
		// 	verbose: true, // Disable console output
		// 	https: true
		// })
		// visualizer()
	]
};