We Keep Coding

Webpack 2: Watch external files

I have a project that uses source files external to the project. Effectively, there is the actual project source code (an Typescript/Angular 2 application, lets call it the 'core' stuff), and this is a generic web application that is meant to be the base code that consumes these external source files.
The external files include additional stuff-- that could be SCSS files, images, evn additional JS. The way I want this to work is that webpack copies these external files from any source directory (this is critical, it is not part of the core project) to a local .tmp directory. The files in the .tmp directory are worked on along with the core src files to generate the prod output.
I can't figure out how to add these additional external source files to the watch list. Effectively what I'm looking to do is watch that directory and as things change, it re-copies the affected files to the local .tmp directory and triggers a recompile.
Presently I have to restart webpack and have a very very ugly solution using Grunt to watch the additional files. It's nasty but these kinds of workarounds have historically been what I've had to do with webpack.
Does anyone have a better solution? Ideally I'd like to not have to mix grunt with webpack. Webpack should be able to do this, but its hard to know whether there's an existing plugin for this or what the best approach would be.
Also, please spare the "look for it on google" or "read the docs" comments. I've combed through it all, hard, and have not found anything.
Thanks in advance.

As of now Webpack doesn't watch external files out-of-the-box . You need a plugin for that.
Basically idea is to have a file watcher module chokidar / watch , listening to the file change , and when there is a change, restart the webpack compilation phase . Webpack plugins can access the compilation object and we you need to hook it to a compiler phase i.e. 'emit' , 'after-emit' etc.
This Webpack plugin exactly solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .

Is there a way to include build number in webpack bundle output(css/js file)?

Right now I have an issue where deployed .js and .css files are cached by our clients browsers. Which means they have to do a hard refresh(CTRL+F5) in order to get the newest updated .js file from the server. This obviously isn't good.
I have seen it's common practice to force a versioning on the .js and .css files name extension, for example so that bundle.js would be named something along the lines of bundle.js?v={versionnumber}?
Another challenge would be to dynamically update this reference in an index.html file. Is there a way to do this in Webpack as well?

Did you read this chapter webpack-caching?
We usually give a [hash] as part of bundle name.
And for your second question, you can try html-webpack-plugin

Adding javascript files to Yeoman webapp generated website

I am playing with the yoman trying to build a web site using the webapp generator.
If Managed to create a web site that works under grunt server, when I change a js file grunt notices the change change and does a live load and everything works as you would expect.
When I try a plan grunt, it attempts to run the dist task, it manages to include my html files, but skips any of the javascript or script files I created in the script and styles diretores. I assume its the case I have to tell grunt to includes these files
Files such as main.js seem to make it through, but there are no references to main.js in the Gruntfile, so I not sure which part of Gruntfile.js to change.
Doing a yo doctor reports
[Yeoman Doctor] Everything looks all right!
Q. How to do I tell grunt to include and user created files.
Q. I noticed that all my image files where renamed, fair enough how do I refer to a file that I known is going to be renamed in a javascript file
Q. Does anybody known a good web resource for yoman where these quesion might have already been answered?

Be careful on this glob pattern scripts/{,*}/*.js. This takes only the js files that are inside scripts or immediate child folders.
Make sure to change it to scripts/**/*.js to include all js files in all subfolders.
Also get an idea on tags build: css, build: js in your index.html, wiredep plugin used by Yeoman in gruntfile to understand what files will be injected into dist folder.

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?

Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.

Jsmin on folder with subfolders

I am running jsmin to compress all the javascript files of my ASP.Net web application as a postbuild event in the csproj file like this:
"JsMin.exe"
"$(ProjectDir)script"
"$(ProjectDir)script\minified.js"
This was working fine when I kept all js files in the root of the script folder. But as it was starting to become alot of files in this folder, I decided to divide the files into subfolders. Now it seems that jsmin only fetches the js files in the root folder, and I cannot see that it has any option to include files in sub-folders. Does anyone have a good solution for a situation like this? Would seem to me that it should be a pretty common thing to do, so that is why I was a bit surprised it was not a parameter to jsmin.exe enabling sub-folders.

You should be able to use DOS' for command to do that:
for /R "$(ProjectDir)scripts/debug" %s in (*.js) do JsMin.exe %s > "$(ProjectDir)scripts/release/%~ns.min.js"
That assumes the scripts are in (or in directories within) a directory named ~/scripts/debug and minifies them to ~/scripts/release with the .js replaced by .min.js.
I've tested that in CMD, but not as a build event in VS. So, you may need to tweak the syntax slightly.

A little late to the party, but below is the code to make Dave Ward's suggestion of recursively minifying javascript files.
Here is the code ported to work using a Visual Studio build event:
for /r "$(ProjectDir)scripts" %%s in (*.js) do $(SolutionDir)tools\jsmin.exe < %%s > "$(ProjectDir)debug\%%~ns.min.js"
type "$(ProjectDir)debug\*.min.js" | "$(SolutionDir)tools\jsmin.exe" > "$(ProjectDir)release\local.min.js"
del "$(ProjectDir)debug\*.min.js"
The above code recurses the scripts folder (the root and sub-directories) for all scripts and places them in a debug folder (this can be any other folder in your directory as long as you have read/write perms set on it and it's not apart of the directory structure you are recursing. It then minifyies all the *.min.js in the debug directory and cleans them up afterwards. I scoured the net trying to find this solution and couldn't so I hope this helps someone in need :)