Switching to webpack from browserify

[niravasher]

Please describe the problem (or idea)

Advantages of webpack over browserify 1) In Browserify you use Gulp/Grunt and a long list of transforms and plugins to get the job done. Webpack offers enough power out of the box that you typically don’t need Grunt or Gulp at all. 2) Webpack assumes you’ll want to compile various formats using a long list of loaders. Sure, you can do all this via Browserify and Gulp, but you have to do more wiring yourself. 3) Webpack can intelligently split your resources into bundles. This comes in handy on larger SPAs. 4) Your users will be served only the files they need for a given page instead of a single monolithic JavaScript file. 5) Finally, if you want to enjoy rapid application development without browser refreshes, Webpack offers hot module replacement.

Please show us where to look

https://beta.sequencer.publiclab.org

What's your PublicLab.org username?

niravasher

Browser, version, and operating system

Ubuntu 19.04

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[harshkhandeparkar]

Cool. Should we add babel as a point too?

[niravasher]

Definitely @HarshKhandeparkar

[niravasher]

@jywarren @HarshKhandeparkar @root00198 @publiclab/is-reviewers this will include lot of changes. Can we work on this?

[harshkhandeparkar]

We being?

[harshkhandeparkar]

Do you want to work on this or collab? Do you need any help? We are always ready.

[niravasher]

Ill need help for sure. Just want to be sure that switching to webpack is required by Public Lab @HarshKhandeparkar

[harshkhandeparkar]

I guess the same issue was opened a while ago. Now, even more code has been added. I think webpack will be a nice addition(it already takes about 3s to browserify)

On Wed, 15 Jan, 2020, 10:30 PM Nirav Asher, notifications@github.com wrote:

Ill need help for sure. Just want to be sure that switching to webpack is required by Public Lab @HarshKhandeparkar https://github.com/HarshKhandeparkar

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/1503?email_source=notifications&email_token=AIJI5H6U3ZA4J2ZZHBPGAKTQ546KTA5CNFSM4KGUVDXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJBBBZQ#issuecomment-574755046, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIJI5HYLCVEJCRA4NGQX6ULQ546KTANCNFSM4KGUVDXA .

[niravasher]

Ok, working on this :smile:

[niravasher]

Webpack requires an entry point and an output point.

entry: "./src/entryFile.js",
output: {
    path: path.join(__dirname, "bind"),
    filename: "sequencer.js"
}

The entry point here is index.js or src/ImageSequencer.js right? @HarshKhandeparkar

[harshkhandeparkar]

It depends on what you are bundling. We want to bundle and src/ImageSequencer.js, examples/demo.js separately into two different files.

[niravasher]

Does webpack recognize require statement or it needs to be changed to import? @HarshKhandeparkar

[harshkhandeparkar]

Import is es6 only. Import won't even work in node.

[niravasher]

Yes webpack recognizes es6 import export syntax. using babel to support part of es5 and to run webpack on firefox, explorer etc

[harshkhandeparkar]

Webpack recognizes the import syntax but node wouldn't recognize the syntax so we can't use import in our library code.

[niravasher]

Steps I am trying to follow 1) [x] make webpack.config.js, webpack.dev.js, webpack.prod.js files. Development env in webpack.dev.js will run on typing npm build. Production env in webpack.prod.js will run on typing npm build:prod.

2) [ ] From Gruntfile.js convert NPMtasks to equivalent webpack loaders/plugins grunt-browserify, grunt-contrib-uglify-es, grunt-browser-sync, grunt-text-replace.

3) [ ] Read package.json file and replace image-sequencer static v3 to v3.5.1

4) [x] Have live relaoding. Using webpack-dev-server in development env with --hot. Not sure if it has live reloading functionality.

5) [ ] compiling src/**/*', 'Gruntfile.js', 'examples/lib/*', 'examples/demo.js

6) [x] Alias ./node_modules/gpu.js/src/index.js to gpu.js

7) [ ] Changing src and destination of core, ui, prodcore, produi and tests in specific files in webpack from Gruntfile.js

8) [x] Uglifying core, ui, prodcore and produi as per Gruntfile.js by adding Uglify plugin in webpack.

9) [ ] Registering tasks as per Gruntfile.js in webpack

I have found these many tasks to perform for successfully shifting to webpack. Please feel free to add/subtract anything if I have missed. @HarshKhandeparkar @jywarren @root00198 @blurry-x-face