How does Webpack know which files to include in library build? How does it know which files should not or should be included, as in miscellaneous files like images, examples, documentation, etc. If it automatically includes them how do we make Webpack ignore these included files?
Webpack scans the actual JS files themselves, starting at your entry point(s) and recursively scanning each referenced file, to determine what to build. It won't include any other files like examples or documentation unless you for some reason are include/requiring them from your javascript.
Things like CSS/LESS/SASS and images are built with specific loaders which generally also only build referenced files.
TL;DR: If it isn't explicitly included somewhere, it probably isn't in the build.
Related
Recently I just picked up Typescript for a personal project. Since the project is designed to be ran locally (explicitly file://), I won't be able to use import/export features due to CORS restrictions. Aware of another similarly written question but lacking the specific context on my use case, I pose these questions:
How does one tell Typescript that all (or at least certain) scripts are imported to HTML via <script type="text/javascript" src="./source.js">?
Does Typescript's tsc build projects with this in mind? Also, does it edit existing HTML files to take this into consideration too? If not, are there tools to automate this process as well?
I don't want to bundle them like webpack or tsc-bundle does, since a secondary objective to this project is to keep all .js files human-readable just as much as the .ts files do.
Building Typescript using tsc -p tsconfig.json, configured to "target" : "ES2015" and "module" : "None", only outputs their respective .js files and doesn't update any of the HTML's <script> includes. Am currently maintaining the html file by manually inserting and juggling any new modules that emerges over the course of development.
My current load order in index.html is as follows:
index.js handles UI controls and loads first.
The remaining pseudo-modules .js files loads in-between, since these only define classes and doesn't perform any operations, so I figured it's safe to load them here.
main.js handles all the code from javascript "modules" and loads last.
My main concern is that my in-between modules might load out of order due to human error.
Edit: Running a local webserver is out of the question too, since the project is meant to target audience with limited technical knowledge, with the index.html file the only file they need to run in their browser.
I want to add Flow to my current project I am working on. Everything works really great. However, I couldn't find a way of someway keep the types post build. I am using a monorepo structure and I have a lot of NPM modules. I would like to get an error if a module changes it's interface or it's exported functions/classes/types changes.
Any ideas/guidance is highly welcomed!
Thanks!
Webpack bundles JS files into a single output file, it has no way do preserve Flow types in the output bundle.
If you want to preserve Flow logic for use alongside this bundle, the current best practice would be to include your original sourcecode as .js.flow files. This blog post elaborates on this approach, but the short version is, you'd use flow-copy-source to output a bunch of .js.flow files that match your original source code.
If you insist on others including your compiled bundle instead of the source files, you'll need to include a .js.flow file that provides all of the external type interfaces. Here's the interface file for Immutable.js as an example.
Unless your library has some sort of build complexity that requires the distribution of its compiled assets, I would just rely on the consumers of your lib to compile and strip types on their own.
Is there a way to generally NOT minify js files but DO minify a single concatenated version?
Basically here's the issue:
Large project with 100's of files.
During development we don't serve up minified js files as they don't add any benefit and just slow us down having to 'compile' a file every time you make a change.
However in production we concatenate the core framework files into a single minified and source mapped file.
Currently we do this using a 'Bundle' via WebEssentials in VisualStudio, the bundle is just an xml file listing the files to concat with attributes saying whether we want it minified and whether we want a source map generated. We also do the same thing with css files. Both are output into a 'release' folder.
in the current version, you can do the following
prepros ui >> right-click on project name >> Project Filters
add *.js to exclude all js files, if you want to minifiy a single file and exclude others, i think you need play with filters specified.
For CSS, I can use SASS to import one CSS file to another and produce only single CSS file. What is the similar method for Javascript files?
You might want to check out Closure Compiler (which is a Google product).
You would probably want the Closure Compiler Application form of the product.
A sample workflow would probably look like:
Create a list of your JS files and paths
Run the command to compile and concatenate files (java --jar compiler.js --js path_to_file1.js --js path_to_file2.js (etc.) compiled.js)
Closure Compiler also has a related project, Closure Stylesheets, that does the same thing for stylesheets.
This approach, of course means that there's a pre-compilation step. Depending on your backend, there also exist libraries that do the compilation when the page is built. For example, for JSP, there's Granule a tag library that creates the compiled JS and CSS files at page build.
There's a third possibility: modularization. Since you gave the example of being able to import CSS files in SASS, an analogue for JavaScript is using a module library, using either the CommonJS standard, or (the one I prefer), the AMD (asynchronous module definition) pattern, which I have personally used with RequireJS. RequireJS also comes with a nice optimizing tool that will bundle up (minify, compress, concat etc) all the required files for your application
UPDATE
Since you mentioned that you are using Django in the comments (might be useful to update the question with this info too), see if this answer helps too
You could use minify which allows you to minify and combine javascript files. It also works with CSS.
When i use r.js to optimize my project, how do I get it to produce a single index.html file that includes only one script (my optimized script) and one css file (my optimized css)? Is this something I would need to write myself post build?
r.js don't include this option built-in. But with a full stack build tool, this will be achievable. I'd recommend grunt.js for this (you'll probably want to take a look at how to create custom grunt task for this though).