Starter template for using CSS Loader and Webpack

Install Node.js.

Clone the repo.

Install project packages with:

$ npm install

Bundle the JS and CSS with webpack. This will watch continuously.

$ npm start

Then open a dev server in the dist directory and open localhost in your browser.

Do a build and then stop.

$ npm run build

You might want to switch to using production settings in the Webpack config.

When running Webpack the JS file index.js and styling imports gt bundled as a single JS file. In particular, there is a local CSS file (styles.css) and an installed CSS dependency (sanitize.css).

The CSS gets added to the JS because of two CSS loading dependencies that are installed and also because Webpack is configured to use those dependencies for CSS files. See webpack.config.js.

When the bundled JS file (bundle.js) gets loaded on the frontend, the JS will inserted the CSS into the DOM for you. So you don't need to add a style or link tag yourself.

• Webpack
  • https://webpack.js.org/
• CSS Loader
  • https://github.com/webpack-contrib/css-loader
  • Using default config settings from README
• Style Loader
  • https://webpack.js.org/loaders/style-loader/
  • Must be installed since that it is the config
• Sanitize CSS
  • https://csstools.github.io/sanitize.css/

Set the dependencies up in a fresh project with:

$ npm i -D webpack webpack-cli css-loader style-loader $ npm i sanitize.css

Released under MIT by @MichaelCurrin.