Skip to main content

Tedshd's Dev note

JavaScript - Why i from RequireJS to webpack

Table of Contents

# Why i from RequireJS to webpack

RequireJS is a Asynchronous Module Definition(AMD) lib

Its powerful to handle modulize on your page and you can handle all loader on JavaScript, you can focus on JavaScript function and web page.

But if your module is become complex and more module, you can find JavaScript request become more and more.

You can find it is a serious performance problem.

Your network has lot of request of js.

I want to less or one js request on a page

So i choice webpack this tool.

It’s powerfull tool handle module bundle.

This is what i want change.

Before

requirejs.png

After

webpack.png

If want to use a lib for global like jQuery

Must use npm install & use ProvidePlugin in webpack.config.js

...
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    }),
],
...

## How it run

You can use

webpack
# if you want watch change
webpack --watch

more in https://webpack.github.io/docs/cli.html

## Use case

If you want bundle all file in directory

var fs = require('fs'),
    entries = fs.readdirSync('./mobile/js/').filter(function(file) {
        return file.match(/.*\.js$/);
    });

entries is a Array show all file.

## My webpack