Webpack: Question: Are there any better options then to put CSS libs to /static?

[exarus]

The official documentation to this template states:

For existing libraries e.g. Bootstrap or Semantic UI, you can place them inside /static and reference them directly in index.html.

Putting the dependencies in /static we both loose an ability to upgrade these libs via npm upgrade and bloating the source code repository. Users might miss the updates because the dependencies versions are spreaded among /static folder and package.json. I think there might be better options to get both fast build speed and declarative dependencies versioning via package.json. For example, the template might provide in /config to notify webpack about the dependencies that should be treated like the /static ones. Hense webpack might i.e. copy them from node_modules to /dist as-is instead of processing and bundling. Also users will get an ability to seamlessly include those CSS libs back in the bundle just by removing the entry from config file.

[LinusBorg]

You can simply import them from node_modules in the main file, like you would for a javascript file:

import 'bootstrap/dist/bootstrap.css'

If you want to cutomize, simply create a main style file and import that one:

// main.scss

// addd your vriable overwrites here..
import '~bootstrap/scss/bootstrap.scss'

// main.js
import './main.scss'

the whole bootstrap CSS will then be included in the extracted CSS file in the dist directory

[exarus]

@LinusBorg Thanks. As far as I understand you suggest to import bootstrap into the bundle. In that case Webpack is going to load it via style-loader and process using postcss (i.e. autoprefixer).

For existing libraries e.g. Bootstrap or Semantic UI, you can place them inside /static and reference them directly in index.html. This avoids extra build time and also is better for browser caching. (See Static Asset Handling)

Quote is taken from docs to template. I believe that the man who wrote the lines meant that the user can optimize build process by putting boostrap.min.css into /static so that files will be transferred to /dist as-is without piping Bootstrap through webpack pipeline. But this solution lacks automatic version management. Maybe it would be better option to load the file via webpack (in order to get it from node_modules) but do not process via style-loader and autoprefixer (because bootstrap is already built, minified and prefixed). Instead webpack may just copy the bootstrap.min.css as-is to the /dist folder.

[LinusBorg]

Well, alll solutions have their trade-offs, so it depends what you want:

• if you want to be able to update these dependencies by updating a package in node_modules, you probably also want webpack to add a hash to the file, so updates will cache-bust existing files for your users. In that case, just import them as I showed.
• If you want you static assets to be really static (i.e. they will likely change (almost) never), it's probably easier to add them to /static, and not a lot of work either.

Yet you can of course change the config (here) to also include some files from node_modules, but that won't hash anything.

Edit: Just realized that would also require some changes to the dev server:

https://github.com/vuejs-templates/webpack/blob/develop/template/build/dev-server.js#L68-L69