Develop Reference

Injecting multiple external javascript files with Webpack

Let's say I have a few external javascript files (libraries, if you prefer to call them that way). Those files haven't been adapted to any of the "modern" JS functionalities, meaning that I can't import them like I'd do with some of the most common libraries nowadays (lodash, axios, etc...). The files in question have been always used as old-style import-and-use libraries (<script src="foo.js"></script>).
How can I make Webpack pack (concatenate) all those files and inject them in the head of my index.html, right before my actual bundle?

You can download 'foo.js' manually and add it to project repo. Imagine like you have a folder called 'external-libs' and you can simply import foo.js as something like following
import '../../external-libs/foo.js';
This will be enough for Webpack to append the content of foo.js to your final bundle.

Webpack watch file changes and trigger loader for other files

I'm looking for a way to watch changes on files (sass files precisely) and execute a loader on other files (js files) with webpack.
The goal is to detect sass changes and recompiling all the javascript files with the babel-loader, because they might import it through the styled-jsx plugin.
I'm stuck in the "loader" concept and can't figure out how to get other files when testing for /.scss$/

You don't need to do anything by yourself if you using scss modules with webpack (more about module concept in the webpack docs.
What webpack does - it starts at entry point (you can specify one or multiple entrypoints, if you don't, default src/index.js would be used). And then builds dependency trees between modules (which can have any file extension as long as there's a specific loader that can turn file into module). Webpack then watches all files and rebuild all modules that have a dependency on changed file. So, if you import the .scss file in, let's say, your entrypoint
import './styles.scss';
// ...
It would rebuild automatically when styles.scss changes

You need to import your .scss file(s) under one of your .js files so that webpack actually picks up the changes.
Then, all loaders you have configured will be applied automatically based on which file type they should target.

Is it possible for webpack to automatically register index files for a given directory?

I'm wondering if, instead of building index files manually, ie. if I have a directory of 'Helper' classes, or Repositories, and I would prefer to import/use them like:
import { UserHelper, GroupHelper } from 'src/helpers';
Can webpack automatically generate the /src/helpers/index.js file which would export each Helper file within that directory automatically? Or should I have to manually create the index file myself?
Thanks,
Ryan

Webpack project with mutliple html / js / css files

I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)

I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle

So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/

Extracting a javascript file from webpack build

I am using webpack for a project where I need to have a javascript config file as part of the built files, but I cannot figure out how to do that.
So I need to have these files in the output:
index.html
app.js
config.js
I figure I need to either:
1) Copy the config.js file from the source folder to the build folder with CopyWebpackPlugin, or
2) Include the file in the compiled bundle and then extract it with ExtractTextWebpackPlugin.
I have tried dozens of different ways of configuring this, but when trying with the copy method, I get the file both inside the app.js bundle AND as a separate file. When I try with the extract method, I cannot seem to figure out how to extract javascript from the main bundle. The docs all seem to explain how to extract css.
How would I go about something like this?

You should be able to accomplish this by using multiple entry points.
https://webpack.js.org/concepts/entry-points/
entry: {
main: './path/to/file/app.js',
config: './path/to/file/config.js'
}
output: {
filename: 'output/path/[name].js'
}
A more complex option, which is typically used for vendor files, would be to use code-splitting.
https://webpack.js.org/guides/code-splitting/