kalcifer / webpack-library-example

An example of how to author libraries using webpack.

Tutorial of how to author a library using webpack.

Outline

This library exposes functionality to transalte numbers to words. It is trivial code but the aim is to bundle it using webpack.

Features

1. Bundling library code into all library targets ie CommonJS, AMD, ES2015 exports, UMD.
2. Having lodash as an external dependency.

webpack-library-example's Issues

I cannot run this code

step
1、npm install
2、npm run build:browser or npm run build:node

Working with ES5

I might be being daft, but could you also use this with ES5? Albeit with some tweaking? Or is it a lot trickier?

gitter room

Could you create a room on https://gitter.im/ for your repository?

converttonum

Hi guys, it's not actually an issue, it's a question.

I can't get what is the reason to call word.toLowerCase() ? index.js line 24
How does it help here?!

Another small thing.
I understand why you use here lodash, question is why do you use reduce ? I'd say it's too sophisticated way to find an element in the collection.
find method might be a good option.

Something like this: return _.find(numRef, ref => ref.word === word) it will either return the first item of the collection or undefined if such does not exist.

webpackNumbers.numtoword is not a function

require('lodash');
var webpackNumbers = require('./webpack-numbers.js');
var out = function() {
    process.stdout.write('This is the result for numtoword(1) === ' + webpackNumbers.numtoword(1));
};
out();

TypeError: webpackNumbers.numtoword is not a function
    at out (C:\Node.js\myPlugins\webpack-library-example\example\node\example.js:4:86)
    at Object. (C:\Node.js\myPlugins\webpack-library-example\example\node\example.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:799:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:862:12)
    at internal/main/run_main_module.js:21:11

need update to webpack5

how styles should be configured?

How webpack should be configured In a lib project which has not only js, but also style files (sass, less, css). When they should be deployed separately (build/main.min.js and build/main.min.css)?

And at the same time, js should not be hard bound to css. Because it is very easy to import css inside of js, but it won't work when you would like to give user possibility to choose whether they want your css or not.

There are few options (which don't work)

import css inside of js

// in main.js
import './style.sass';

but when a user would use this lib she would be forced to use styles.

refer css as an entry:

entry: {
  main: 'path/to/the/main.js',
  style: 'path/to/the/style.sass',
}

will create style.js which is not what could be expected.

use extract-text-webpack-plugin

https://github.com/webpack-contrib/extract-text-webpack-plugin
It still creates style.js but with desired style.css

Can I use lazy load in library, and how to use it?

In the library, I need dynamic import some dependencies. And I will use the library in another project. The question is how to dynamic import in the library

Thanks

I just wanted to say thanks for making this project.
I used it as a starting point for learning how to make one with TypeScript.
Just in case you are curious https://github.com/cramhead/webpack-library-example

Marc