bootstrap-npm-starter icon indicating copy to clipboard operation
bootstrap-npm-starter copied to clipboard

Add basic webpack for JS bundle

Open mdo opened this issue 5 years ago • 3 comments

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.

mdo avatar Jun 17 '20 22:06 mdo

Webpack is a good choice, most of the time Rollup is used to build libs and Webpack is used a lot

Johann-S avatar Jun 27 '20 19:06 Johann-S

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.

HansUXdev avatar Dec 30 '20 00:12 HansUXdev

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.

yurj avatar Oct 05 '21 11:10 yurj