Develop Reference

Nuxt (and Webpack): How to separate a single JS file to be reused by external app?

I've stumbled upon several pages about importing external files into a Nuxt project, but what I'm trying to do is the opposite.
I have two sites or apps: Site A and Site B. Site A is the main one built using Nuxt. Site B is a simple site with static pages, not using Nuxt or Vue.
Site A has a JavaScript file, let's say its path is /lib/common.js. I use it extensively on Site A. And I also want to use it on Site B.
However, when I do yarn generate on Site A, all my JS files, including common.js, get bundled into a JavaScript chunk files, and each file is named with a hash of the content of the file. For example, /lib/common.js, /lib/util.js get bundled up as /dist/_nuxt/05443d2eb25fc282bbea.js while /lib/user.js is bundled as /dist/_nuxt/1326d0fc90870f9f4ca4.js.
That means:
the file I want to use is actually bundled with other files into the same package, so if I load that file, I have to load extra code with it and,
I can't really predict the name of that file.
Is there a way for me to tell Nuxt, or most likely Webpack, to single out /lib/common.js into its own bundle and then save it as /dist/_nuxt/lib/common.js instead of a hash, so the filename is more predictable?

You would need to create a separate webpack configuration for that single file to achieve the desired result as only one output configuration per configuration file is supported[0].
[0] https://github.com/webpack/docs/wiki/configuration#output
Example common library configuration common.lib.config.js
var path = require('path');
module.exports = {
entry: './lib/common.js',
output: {
path: path.resolve(__dirname, 'dist/_nuxt/lib'),
filename: 'common.js'
}
};
And build it with webpack --config common.lib.config.js

Webpack not including all required files in build

I am working on rewritting some part of a js library with WebAssembly . The library uses rollup to bundle and the output created was dist/rebound.js . My changes add an additional file rebound.wasm . I didnt use any wasm loader but just the fetch api to bring to load wasm ,
//rebound.js
fetch('rebound.wasm').then(//instantiate)
I use rollup-copy-plugin to copy the wasm file to dist/rebound.wasm. Everything is fine, the dist folder has both js and wasm file. But when I use it in a test project which uses webpack and import rebound from 'rebound' the rebound.js file is present but the rebound.wasm file is not present. The fetch api gives a 404 error.
I feel webpack may be treeshaking it as there is no explicit import statement. How do I make sure rebound.wasm would in the js build?
If you need anymore info please ask.

Webpack Including JavaScript File via <script> Tag

I'm using Webpack with Storybook and need to include a JavaScript library file in an HTML file via a script tag. Unfortunately, I get a 404 error indicating that the file was not found (the file's path is based on my local filesystem and is correct). How do I inform Webpack regarding where to look for my library or "static" files?

Add files in entry object in webpack.config.js
entryPoint = {
app: ['path/to/script', 'path/to/script2','./index.js'],
};
This will make sure that you have the library loaded when you have run index.js (entry point of project).
More on Webpack entry points.

Why does r.js combine and minify JS, then copy all the files to output dir?

I've been working with the RequireJS optimizer to create multiple optimized JS files for my project and have come across a problem that I’ve found mentioned in other posts but have not found a solution for.
When using r.js to optimized a single file, it pulls all the JS dependency into single file and drops it into the file specified by the “out” property in the build file. However, when trying to create two optimized files (i.e. multipage project using the ‘modules’ property), r.js creates two nicely optimized files but then drops ALL folders and files from the appDir into the output directory. That is, it pulls together and minifies all JS dependencies but then copies the individual files into the output directory.
I realize that r.js is not intended to be a deployment tool so is this by design or is there a way to tell r.js to not copy dependent files and directories into the output directory.

Yes, in your r.js build file, set the removeCombined option to true in order to preserve only the modules you specified to the output location.
{
...
//If set to true, any files that were combined into a build bundle will be
//removed from the output folder.
removeCombined: true,
...
}
See the r.js documentation's example build file.

How to use webshim with assetic in a Symfony2 project?

I would like to use Webshim in a Symfony2 project.
So far, the webshim library is in mybundle/Resources/public/components/webshim...
The webshim library has a polyfiller.js that loads specified scripts from the ./shims directory. This is also clearly explained from the webshim docs:
The code inside of the polyfiller.js automatically detects the path to the script it is run from and assumes, that the shims folder is in the same directory. This means, you have to make sure, that either the shims folder is placed parallel to the code of the polyfiller.js or to configure the path using the basePath option.
I'm using other libraries and they all end in the /web/js or /web/css directories as they should do. They are combined and have names like "6464de0.js" and are perfectly accessible.
But, webshim tries to load scripts from the shims folder. This makes sense when you look at the docs.
This is an example of 404's in the console:
GET http://domain.dev/app_dev.php/js/shims/combos/1.js 404 (Not Found)
How can I make the webshim library work with assetic?

I have the same issue and here is what I did:
Put the 'shims' folder in the public folder of your desired bundle (eg. AcmeBundle/Resources/public/js/shims) then when you do assets:install using the console command it will be installed in the Symfony/web directory.
Then set the webshim option so that it points to that path:
webshim.setOptions('basePath', '/bundles/acme/js/shims/');