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.
Related
My project does not recognize the css and other files in the html files I have created, although I have written the extension paths correctly. How can I fix?
First of all you need to configure serving static files in Startup
app.UseStaticFiles(); //serves wwwroot by default
To serve your theme folder you need to add the following lines
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "theme")),
RequestPath = "/theme"
});
You did not put the correct path there. Your "style.css" is in 'theme/src/style.css' not in the 'theme/style.css'. Also use VS Code not Visual Studio because is useless if you create just files.
Also you did not provide all the files that are in the JS folder and CSS folder.
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.
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.
I'm building an app with the AirConsole JS service. AirConsole only provides their library as a .js file you would include in your page with the usual:
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.6.0.js"></script>
However, I'm using Webpack and would like to import the script into my other JS files. I have tried a few methods with no luck:
Create an entry file named vendor which imports the airconsole.js file. This creates a vendor.bundle.js file which I can include on my page
Add the AirConsole path to my index entry point so the script is included in the bundle.js file. With this method I can verify the AirConsole code is included in the bundle.js file but attempting to create a new instance of AirConsole results in AirConsole is undefined
Am I on the right track with these methods? If not, what is the recommended way to import a non-module .js file?
The best way is by an action which we call "shimming". You can check out our new docs page for information. There are a few different ways to do on it (that depend on the needs) for your non-module.
https://webpack.js.org/guides/shimming/
I'm using RequireJS for my javascript project, and r.js to build one single javascript file for production. This single file (main.js) is then uploaded to a CDN. This all works very fine, but now I'm trying to add i18n support.
The problem is that the location of the i18n file is relative to the main javascript file. So within a module, I would have:
define(['i18n!nls/text'], function(Translation) { });
This all works very fine when I'm developing, but for production the problem is that the translation file is not relative to the main.js file as this is placed in a CDN. I don't want to store the translation file in the CDN, so how do I change the reference to that file in the build process?
I found a solution to my problem.
In the RequireJS config I've added:
requirejs.config({
paths: {
nls: "/js/nls"
}
});
Because the path starts with a slash, RequireJS knows it's not relative. Now the problem I got was that the build would fail, as RequireJS would be looking for default language files in /js/nls. Therefore, I added a symlink from the root of my webserver to the nls directory on the machine.
Had the same issue.
Use baseUrl config
require.config({
baseUrl: '/path_for_not_included_modules/'
});