We Keep Coding

Webpack directives

I am building a typescript/javascript package that will contain several JSON files. I do not want those JSON files included in the bundle that webpack outputs. I do want those files included in the output folder of the bundled javascript (copied from the node_module directory). This would be similar to including images.
I would like to create directives that explain to webpack what to do vs writing documentation in hopes that somebody reads it and does it correctly.
I know that copy-webpack-plugin will do what I need to do, but not sure how to set up this directive.
Is it even possible?
So
MyPackage has JSON files
Another developer uses my npm-package
Developer uses web pack in their project
Developers webpack bundles the javascript, excludes my JSON files from the bundle, but copies them to the output directory.

Figured it out within the package.json
Create a folder called bin (whatever) on the same level as src.
Copy the contents that need to be included in the package but not compiled or bundled into javascript, such as json files.
Update package.json add the following entry
"files": [
"bin"
],
Now when publishing, the npm package will contain the bin directory. When building within your project using webpack it will recognize this and include those files in the webpack build and deploy as part of the deployment but not in the javascript bundle.
Then from there, your javascript should reference the files similar to reading a file whether it be on the server or client sie.

How to exclude some files when build on vue-cli3 project

I have a project created by vue-cli3. Now I have some files that I use during development, but I don't need them in a production environment.
eg:
I put a file named test.html into /public, and I could access it using http://localhost:8080/test.html (assume project running at http://localhost:8080). When I generate a production version, I don't want this file got included in /dist(default output dir).
All files under /public will be copyed to /dist/static, but it is not the result I expect.
How can I do to get access some files when developing but don't get them involved in production?

compiling pug templates to single client side js file

I just started working with pug and am using it for a small single page app. I'm using templates that are compiled to javascript functions that I will use in my SPA to render HTML. Using the pug-cli, I am able to generate multiple .js files that each contain the desired template function. However, instead of compiling multiple javascript files, I'd like to merge all the functions in a simple 'template.js' file that I can then call from my client app. Here's the command I'm currently using
pug -c --name-after-file -w .\views\ -o .\public\
I've googled it, searched on Stackoverflow, and also found out that the pug API itself has the pug.compileFileClient that is meant to do this perhaps for an Express app. However, I couldn't find if this functionality is implemented in the pug-cli.

There is an npm package called puglatizer that takes a directory of pug templates and compiles it into single .js file that can be included in your html file and individual render functions can be called to produce the html.
It can be used both at the command line using a CLI or imported via require can called programmatically in your build process.
I ended up using the CLI version. Simply install the package globally using:
npm install puglatizer -g
Then run puglatizer -d path/to/templates -o /path/to/output/templates.js
This will compile all the templates in the path/to/templates folder to a templates.js file in /path/to/output.
Include the generated file in your html page via the script tag.
Then you can call the template in Javascript by invoking puglatizer.TemplateFileName({data:"myData"}) where TemplateFileName is the file name of on your pug templates in the path/to/templates directory.

Including source files in Cordova project from outside the project's directory hierarchy

tl;dr: I want to include some JavaScript files from another project in another directory into a Cordova project, without (manually) copying those files into my Cordova project directory tree. How?
I am editing an existing Cordova project that makes use of some JavaScript source files originally written for a large web application project.
Currently, I am adding these source files by copying them to a subdirectory of the Cordova project, and by adding a <script> tag with the relative path to an index.html file in the Cordova project. This causes the JavaScript files to integrated in the deployed app, apparently by virtue of Cordova's (or Ionic's?) magic.
Now, it would be preferrable for me to avoid copying the JavaScript files to my Cordova project directory. Instead, I would like to directly link to the files in their original location rather than copying them (so updates from the web application get automatically applied to the Cordova project, as well).
As both the Cordova project and the large web application reside in the same VCS repository, the relative path to the files will always be the same - for the sake of an example, like this:
|-repository/
|-web/
| |-src/
| |-myCode.js
|-cordova
|-src
|-index.html
|-helpers
|-myCode.js // copy of /repository/web/src/myCode.js
Therefore, I have tried setting the relative path in the aforementioned index.html file - but unfortunately, Cordova seems to take over that file verbatim, and thus, the resulting URL will not exist (prompting a 404 error in the console, and causing the code from the file to be unavailable).
How can I have Cordova include and reference files from outside the directory hierarchy of a Cordova project?
Is there maybe at least a way to have Ionic or Cordova automatically copy the files into the Cordova project directory upon building the app?

Using hashed bundles in a .Net project

So the .Net project uses a .csproj file to keep track of files that are included in project which eventually make it's way on prod. Having a webpack configuration that bundles the JS and CSS and also moves all assets into a /media folder, all with a hash how it's possible to "include" those files in the project in an automatic way. Maybe by reading an asset-manifest.json file or some other way?

Working with MVC applications for example you can configure webpack to output the bundle in your scripts/dist folder and your mvc app can referrence this one.
Other option if you need advanced scenario is using gulp to copy files / clean / whatever.