Menu
I'm having trouble accessing a webpack bundled library from the browser.
Example: I have a class Foo
// foo.js "use strict"; export default class Foo { constructor() { var bar = "bar"; } } Foo is imported in src.js
// src.js "use strict"; import Foo from "./foo.js"; The webpack config looks like this. The entry is src.js and the output file is bundle.js.
// webpack.config.js module.exports = { entry: './src.js', output: { path: '.', filename: 'bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }, ] }, }; Webpack compiles everything okay, and I'm able to load it into my HTML file.
<!-- index.html --> <!DOCTYPE html> <html> <head> <script src="bundle.js"></script> <script type="text/javascript"> var x = new Foo(); console.log(x); </script> </head> <body> </body> </html> it's at this point that I'm getting the error. For some reason, the bundled JS doesn't put the Foo class into a namespace the browser is able to access.
This is the error I get in Firefox:
ReferenceError: Foo is not defined[Learn More]
There's some configuration in WebPack I'm not grokking, I'm sure of it, but I've so far not been able to figure it out.
973
Webpack is a command line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your javascript files and any other assets and transforms then into one huge file. This big file can then be sent by the server to a client's browser.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.
Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles the entire network up into manageable output files. This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today.
Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project. In general it's good practice to clean the /dist folder before each build, so that only used files will be generated.
To make this code re-usable, you need to tell webpack you are authoring a Library.
From the webpack documentation:
To make your library available for reuse, add library property in webpack configuration.
To create your library, make the following change:
module.exports = { entry: './src.js', output: { path: '.', filename: 'bundle.js', library: 'fooLibrary', //add this line to enable re-use }, ... In order to use the library, you can then reference it in your other scripts:
<script type="text/javascript"> var x = new fooLibrary.Foo(); console.log(x); </script> Looks like 'var' is the default for output.libraryTarget therefore you should be able to define your output.library property and you will be able to access the var globally. https://webpack.js.org/configuration/output/#output-librarytarget
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
