From 0649e6ab78867ba2e3793a31ee93e32a1deb33cd Mon Sep 17 00:00:00 2001
From: SzymonKrysztofiak <s.krysztofiak@outlook.com>
Date: Sun, 21 Apr 2019 06:33:36 +0200
Subject: [PATCH 1/2] Readme update: Webpack configuration

---
 README.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/README.md b/README.md
index 7c073bc..6960b7e 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,7 @@ stylesheets: {
 If you use something other than [Brunch](https://brunch.io) to manage your assets,
 you need to add the files to the assets manager of choice.
 
+
 ## Javascript
 
 If you wish to use the accompanying [cell-js](https://github.com/DefactoSoftware/cell-js)
@@ -239,3 +240,66 @@ Builder.register(AvatarCell, "User-AvatarCell");
 ```
 
 When in doubt, the cell name corresponds to the `data-cell` attribute on the DOM element.
+
+
+## Webpack configuration
+
+If you use webpack, you can easily configure it.
+
+#### 1. Import the context of the folder in which you have cells. Next import the library into app.js, which is a webpack input file:
+
+```js
+// assets/src/js/app.js
+
+...
+const importAll = function(r) {
+  r.keys().forEach(r)
+}
+
+importAll(require.context("../../../lib/YOUR_DIRECTORY/cells", true, /\.js$/))
+
+import Builder from "@vendor/cell/builder"
+...
+```
+
+#### 2. Create aliases in the webpack configuration file:
+
+```js
+// assets/webpack.config.js
+
+...
+  resolve: {
+    symlinks: false,
+    modules: ["node_modules"],
+    alias: {
+      "@": path.resolve(__dirname, "./src/js"),
+      "@cells": path.resolve(__dirname, "../lib/YOUR_DIRECTORY/cells"),
+      "@vendor": path.resolve(__dirname, "./vendor"),
+      "@libs": path.resolve(__dirname, "./node_modules")
+    }
+  },
+...
+```
+
+#### 3. Create the index.js file in the target cell and use the aliases to import the library.
+
+#### E.g. calendar:
+
+```js
+// cells/calendar/index.js
+
+...
+import Cell  from "@vendor/cell/cell"
+import Builder from "@vendor/cell/builder"
+import moment from "@libs/moment" // <-- JS library
+
+class CalendarCell extends Cell {
+  initialize() {}
+}
+
+Builder.register(CalendarCell, "CalendarCell")
+
+export default CalendarCell
+
+...
+```

From 6095f61aaf24b941507beeead99b86d4879f72b9 Mon Sep 17 00:00:00 2001
From: SzymonKrysztofiak <s.krysztofiak@outlook.com>
Date: Sun, 21 Apr 2019 06:42:01 +0200
Subject: [PATCH 2/2] Update README: Webpack 4 configuration

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6960b7e..58fcbe7 100644
--- a/README.md
+++ b/README.md
@@ -258,7 +258,7 @@ const importAll = function(r) {
 
 importAll(require.context("../../../lib/YOUR_DIRECTORY/cells", true, /\.js$/))
 
-import Builder from "@vendor/cell/builder"
+import Builder from "@vendor/cell/builder" // <-- @vendor is an alias from webpack.config.js, take a look below.
 ...
 ```
 
@@ -281,7 +281,7 @@ import Builder from "@vendor/cell/builder"
 ...
 ```
 
-#### 3. Create the index.js file in the target cell and use the aliases to import the library.
+#### 3. Also works fine with [cell-js](https://github.com/DefactoSoftware/cell-js) plugin. Just create the index.js file in the target cell and use the aliases to import the library.
 
 #### E.g. calendar: