bootstrap-npm-starter
bootstrap-npm-starter copied to clipboard
Add basic webpack for JS bundle
This is only a first stab at adding webpack bundling for our JS here. I know we could load up more through this, like our styles, but I'm unsure of the immediate benefit to that.
Also want to use this as a brief opportunity to figure out if webpack is the right choice here, or if Rollup or something else is. I'm still familiarizing myself with some of the tooling and concerns around requiring the transpilers since the regular imports we have here today seem to work.
Webpack is a good choice, most of the time Rollup is used to build libs and Webpack is used a lot
Does this really need a webpack config file? We could use use the webpack cli.
"config": {
"src": "./assets/js/src",
"dest": "./assets/js/dist",
"presets":"@babel/preset-env",
"plugins":"@babel/plugin-proposal-optional-chaining,@babel/plugin-proposal-function-bind",
"mode":"production",
"targets":"browserslist:modern",
"ignore ": "",
},
"scripts": {
"babel": "babel $npm_package_config_src --out-dir $npm_package_config_dest --presets=$npm_package_config_presets --plugins $npm_package_config_plugins",
"js": "npx webpack serve --entry $npm_package_config_src/starter.js ---output-path $npm_package_config_dest --mode development",
"js:prod": "npx webpack --entry $npm_package_config_src/starter.js ---output-path $npm_package_config_dest --env prod --env min",
},
Something like this could also help solve #21 by using the built in dev server which has live reloading. Also the babel task is meant to give users more controller over their JS targets and runs before webpack.
At least with webpack we could deploy the starter compiled files somewhere (index + css + js) without copying all the node_modules directory or loading resources manually. However, compiling can take time when there are a lot of files, shouldn't be the case for npm-starter.