How to bundle a library with webpack?

by

You can find good guide for creating libraries in Webpack 2.0 documentation site. That’s why I use ver 2 syntax in webpack.config.js for this example.

Here is a Github repo with an example library.

It builds all files from src/ (js, png and css) into one JS bundle which could be simply required as an umd module.

for that we need to specify the follow settings in webpack.config.js:

output: {
    path: './dist',
    filename: 'libpack.js',
    library: 'libpack',
    libraryTarget:'umd'
},

and package.json should have:

"main": "dist/libpack.js",

Note that you need to use appropriate loaders to pack everything in one file. e.g. base64-image-loader instead of file-loader

Related Contents:

  1. Passing environment-dependent variables in webpack
  2. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  3. The create-react-app imports restriction outside of src directory
  4. ES6 exporting/importing in index file
  5. How to build minified and uncompressed bundle with webpack?
  6. What are differences between SystemJS and Webpack?
  7. How to prevent moment.js from loading locales with webpack?
  8. Define global variable with webpack
  9. How to bundle vendor scripts separately and require them as needed with Webpack?
  10. How to load image files with webpack file-loader
  11. How to get access to webpack-dev-server from devices in local network?
  12. Configure webpack to allow browser debugging
  13. How to import image (.svg, .png ) in a React Component
  14. Webpack 4 – How to configure minimize?
  15. How to allow for webpack-dev-server to allow entry points from react-router
  16. webpack –watch isn’t compiling changed files
  17. Add Favicon with React and Webpack
  18. Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
  19. How to load all files in a directory using webpack without require statements
  20. Webpack not excluding node_modules
  21. Conditional build based on environment using Webpack
  22. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  23. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  24. Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
  25. TypeError: CleanwebpackPlugin is not a constructor
  26. Webpack: Bundle.js – Uncaught ReferenceError: process is not defined
  27. Output an ES module using webpack
  28. Webpack5 Automatic publicPath is not supported in this browser
  29. How can I use webpack with express?
  30. Webpack sass where is the css file
  31. Basic webpack not working for button click function – Uncaught Reference error: undefined
  32. Babel Plugin/Preset files are not allowed to export objects, only functions
  33. How to load library source maps using webpack?
  34. Webpack Error – configuration.node has an unknown property ‘fs’
  35. Webpack 4 migration CommonsChunkPlugin
  36. Ionic 2: ReferenceError: webpackJsonp is not defined
  37. In the `import` syntax of ES6, how is a module evaluated exactly?
  38. What is the best practice for importing angularjs using webpack?
  39. Static image src in Vue.js template
  40. Get Webpack not to bundle files
  41. What Does Eject do in Create React App?
  42. DevTools failed to parse SourceMap
  43. How to update webpack config for a react project created using create-react-app?
  44. How can I polyfill Promise with webpack?
  45. Cannot find module ‘path’
  46. Webpack 5 – Uncaught ReferenceError: process is not defined
  47. All my code runs twice when compiled by Webpack
  48. Importing CSS files in Isomorphic React Components
  49. Vuejs 3 webpack : Problem with vue-template-compiler
  50. Babel 6 transform-runtime: $export is not a function

Leave a Comment