Buy

Since the require() key doesn't work in a browser:

217 lines web/assets/js/RepLogApp.js
... lines 1 - 2
const Helper = require('./RepLogHelper');
... lines 4 - 217

We're going to use Webpack to... pack it all together! Let's jump straight in to see how it works!

Installing webpack

In the last tutorial, we installed Babel:

13 lines package.json
{
... lines 2 - 7
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-preset-env": "^1.1.8"
}
}

We're going to use Babel again. But for now, let's remove it. In your terminal, run yarn remove babel-cli then babel-preset-env:

yarn remove babel-cli babel-preset-env

After this, we have absolutely nothing in our app: package.json is empty:

10 lines package.json
{
... lines 2 - 7
"devDependencies": {}
}

And so is node_modules/. We're starting from scratch.

Now, add webpack:

Tip

This tutorial uses Webpack v3, so please double check that you do too, otherwise, you will run into some troubles in further chapters

yarn add webpack@3 --dev

As it's downloading, let's talk strategy. Webpack is an executable, and we will point it at RepLogApp.js. Webpack is amazing because it will actually read the require() call inside that:

217 lines web/assets/js/RepLogApp.js
... lines 1 - 2
const Helper = require('./RepLogHelper');
... lines 4 - 217

Open RepLogAppHelper.js, and finally dump one big file with both modules inside. Yes, this means we will get to use the require() function and our browser will still get one, streamlined, simple, beautiful JS file.

Create a new directory in web/ called build/: we'll put our finished file here.

Running webpack

Back in our terminal, awesome! Yarn finished its work... and now node_modules/ is filled with goodies. To run Webpack, use ./node_modules/.bin/webpack. This needs 2 arguments: the input file - so web/assets/RepLogApp.js - and the output file - web/build/rep_log.js - a different filename to avoid confusion.

Deep breath. Run webpack:

./node_modules/.bin/webpack web/assets/js/RepLogApp.js web/build/rep_log.js

Yes! No errors... and it looks like it did something. Check the web/build directory... we do have a rep_log.js file. In index.html.twig, update the script src to point here: build/rep_log.js:

67 lines app/Resources/views/lift/index.html.twig
... lines 1 - 53
{% block javascripts %}
... lines 55 - 57
<script src="{{ asset('build/rep_log.js') }}"></script>
... lines 59 - 65
{% endblock %}

Now, refresh! Everything works! Holy cats Batman! We just unlocked the require() function for front-end JavaScript. Game. Changer.

Checking out the Compiled File

Check out the compiled file. Webpack adds some bootstrap code at the top: this helps it do its job internally. Then, below that, you see our code: RepLogApp first and then, the Helper class.

Yep, webpack, um, packs all our modules into one file. Well, it's actually much, much more powerful than that. But this is already huge.

Ignore the build Directory

Now, the build/ directory is not something we need to commit to the repository: we can always rebuild this file whenever we need to. So, in .gitignore, ignore it: /web/build/*:

19 lines .gitignore
... lines 1 - 17
/web/build/*

Next, we'll create the all-important webpack.config.js file: they key to unlocking Webpack's full potential.

Leave a comment!

  • 2018-06-28 Diego Aguiar

    Hey Сергей Бевзенко

    Thanks for informing us! I already fixed it :)

    Have a nice day

  • 2018-06-28 Сергей Бевзенко
    ./node_modules/.bin/webpack web/assets/RepLogApp.js web/build/rep_log.js


    is invalid path.

    Correct is

    ./node_modules/.bin/webpack web/assets/js/RepLogApp.js web/build/rep_log.js
  • 2018-03-27 weaverryan

    Thanks for the notes David Patterson! I have an issue internally to start adding some notes to the tutorial for V4 - this is very useful stuff!

  • 2018-03-22 David Patterson

    Somewhere between this tutorial and Webpack V4.2.0, the webpack CLI was extracted into a separate package:

    The CLI moved into a separate package: webpack-cli.
    Please install 'webpack-cli' in addition to webpack itself to use the CLI.
    -> When using npm: npm install webpack-cli -D
    -> When using yarn: yarn add webpack-cli -D

    It also appears the V4 wants the -o switch before the output file name.

    And, If you don't have a webpack.config.js file with a

    module.exports = {
    "mode": "development" // (or "production")
    }


    webpack will throw a warning about the mode not being defined.

    You might want to add a note about these things.
    Thanks!