Webpack 4

.npmignore

@@ -1,3 +1,4 @@
+yarn-error.log
 yarn.lock
 *.code-*
 __tests__

CHANGELOG.md

@@ -1,13 +1,17 @@
+# 2.0.0
+
+-   Webpack 4
+
 # 1.2.0
 
-* Reduce bloat
-* Simplify configuration
+-   Reduce bloat
+-   Simplify configuration
 
 # 1.1.0
 
-* Rewrite the core with Typescript
-* Smaller footprint
+-   Rewrite the core with Typescript
+-   Smaller footprint
 
 # 1.0.0
 
-* Initial release
+-   Initial release

README.md

@@ -2,6 +2,16 @@
 
 [![Build Status](https://travis-ci.org/gladeye/bento.svg?branch=master)](https://travis-ci.org/gladeye/bento) [![dependencies](https://david-dm.org/gladeye/bento.svg?theme=shields.io)](https://david-dm.org/gladeye/bento)
 
+## Installation
+
+```shell
+# package
+yarn add @gladeye/bento@beta -D
+# peer dependencies
+yarn add webpack webpack-dev-server webpack-cli -D
+yarn add core-js
+```
+
 ## API
 
 ```js

__tests__/e2e/__snapshots__/standard.test.ts.snap

@@ -12,13 +12,12 @@ Object {
 
 exports[`build exports a correct \`config\` for webpack in production 1`] = `
 Object {
-  "RobotoMono-Regular.ttf": "/RobotoMono-Regular.a48ac416.ttf",
   "cat.gif": "/cat.5082946a.gif",
-  "giphy.gif": "/giphy.a47e713b.gif",
-  "main.css": "/main.bd753fff.css",
-  "main.js": "/main.d8732cfc.js",
+  "main.css": "/main.04d8cdd3.css",
+  "main.js": "/main.fcc39b91.js",
   "nice.jpg": "/nice.9c3c4150.jpg",
-  "runtime.js": "/runtime.631fbc64.js",
-  "vendor.js": "/vendor.a9d97159.js",
+  "runtime.js": "/runtime.ae3ec808.js",
+  "vendor.css": "/vendor.eb592cd8.css",
+  "vendor.js": "/vendor.9e956fd5.js",
 }
 `;

__tests__/e2e/plain.test.ts

@@ -9,8 +9,9 @@ describe("build", () => {
         }).bundle("main", `~/fixtures/${entry}.js`);
         const files = {};
 
-        return bento.export().then(config => {
+        return bento.export().then((config) => {
             config.devtool = false;
+            config.cache = false;
             const controller = new WebpackController(config);
             const promise = controller.compile();
 
@@ -23,7 +24,7 @@ describe("build", () => {
                 callback();
             };
 
-            return promise.then(stats => {
+            return promise.then((stats) => {
                 return [files, stats];
             });
         });
@@ -34,8 +35,8 @@ describe("build", () => {
             expect(Object.keys(files)).toEqual(["/main.js"]);
             const bundle = files["/main.js"];
 
-            expect(bundle).toContain("function __webpack_require__(");
-            expect(bundle).toContain("__webpack_require__(/*! ./a */");
+            // expect(bundle).toContain("function __webpack_require__(");
+            // expect(bundle).toContain("__webpack_require__(/*! ./a */");
             expect(bundle).toContain("./__tests__/fixtures/main1.js");
             expect(bundle).toContain("./__tests__/fixtures/a.js");
             expect(bundle).toContain("./__tests__/fixtures/b.js");

__tests__/e2e/standard.test.ts

@@ -26,7 +26,10 @@ describe("serve", () => {
             );
 
             proc.stdout.on("data", cb.bind(null, proc));
-            proc.stderr.on("data", reject);
+            proc.stderr.on("data", function(data) {
+                if (data.indexOf("DeprecationWarning") < 0) reject(data);
+                else console.log(data.toString());
+            });
             proc.on("exit", resolve);
             proc.on("error", reject);
         });
@@ -41,40 +44,36 @@ describe("serve", () => {
         return server.listen(9000);
     };
 
-    it(
-        "should work as expected",
-        async () => {
-            const server = proxy();
+    it("should work as expected", async () => {
+        const server = proxy();
 
-            await serve(async (proc, data) => {
-                const done = function() {
-                    server.close();
-                    proc.kill("SIGINT");
-                };
+        await serve(async (proc, data) => {
+            const done = function() {
+                server.close();
+                proc.kill("SIGINT");
+            };
 
-                const output = data.toString();
-                if (!/Compiled successfully/.test(output)) return;
+            const output = data.toString();
+            if (!/Compiled successfully/.test(output)) return;
 
-                const mainBody = await (await fetch(
-                    "http://localhost:8000"
-                )).text();
+            const mainBody = await (await fetch(
+                "http://localhost:8000"
+            )).text();
 
-                const proxyBody = await (await fetch(
-                    "http://localhost:8000/api"
-                )).text();
+            const proxyBody = await (await fetch(
+                "http://localhost:8000/api"
+            )).text();
 
-                expect(mainBody).toContain("<title>Webpack App</title>");
-                expect(mainBody).toContain(
-                    `<script type="text/javascript" src="/main.js"></script>`
-                );
+            expect(mainBody).toContain("<title>Webpack App</title>");
+            expect(mainBody).toContain(
+                `<script type="text/javascript" src="/main.js"></script>`
+            );
 
-                expect(proxyBody).toContain("proxy says hi");
+            expect(proxyBody).toContain("proxy says hi");
 
-                done();
-            });
-        },
-        120000
-    );
+            done();
+        });
+    }, 120000);
 });
 
 describe("build", () => {
@@ -93,7 +92,10 @@ describe("build", () => {
         return bento.export(env).then((config) => {
             if (overwrite) overwrite(config);
 
+            config.performance = { hints: false };
+
             config.devtool = false;
+            config.cache = false;
             const controller = new WebpackController(config);
             const promise = controller.compile();
 
@@ -156,20 +158,23 @@ describe("build", () => {
         return build("main2", Env.Production).then(({ files, stats }) => {
             const keys = Object.keys(files);
             expect(keys).toEqual([
+                "/nice.9c3c4150.jpg",
+                "/cat.5082946a.gif",
                 "/RobotoMono-Regular.a48ac416.ttf",
                 "/giphy.a47e713b.gif",
-                "/cat.5082946a.gif",
-                "/nice.9c3c4150.jpg",
-                "/main.d8732cfc.js",
-                "/runtime.631fbc64.js",
-                "/vendor.a9d97159.js",
-                "/main.bd753fff.css",
+                "/main.04d8cdd3.css",
+                "/main.fcc39b91.js",
+                "/runtime.ae3ec808.js",
+                "/vendor.eb592cd8.css",
+                "/vendor.9e956fd5.js",
                 "/manifest.json"
             ]);
 
-            expect(files["/main.d8732cfc.js"]).toContain(`return\"This is a\"`);
-            expect(files["/main.bd753fff.css"]).toContain("color:red");
-            expect(files["/main.bd753fff.css"]).toContain("@-webkit-keyframes");
+            expect(files["/main.fcc39b91.js"]).toContain(`return\"This is a\"`);
+            expect(files["/main.04d8cdd3.css"]).toContain("color:red");
+            expect(files["/main.04d8cdd3.css"]).toContain("@-webkit-keyframes");
+            expect(files["/vendor.eb592cd8.css"]).toContain("font-size:12px");
+            expect(files["/vendor.9e956fd5.js"]).toContain("lodash");
             expect(JSON.parse(files["/manifest.json"])).toMatchSnapshot();
         });
     });

__tests__/fixtures/main2.js

@@ -2,6 +2,8 @@ import "./style.scss";
 import cat from "m1/cat.gif";
 import nice from "~/fixtures/images/nice.jpg";
 import a from "~/fixtures/a";
+import object from "lodash/fp/object";
+
 const x = 1;
 
 console.log(a);

__tests__/fixtures/main3-a.js

@@ -1,3 +1,4 @@
 import a from "m1/a";
+import object from "lodash/fp/object";
 
 console.log(a);

__tests__/fixtures/main3-b.js

@@ -1,4 +1,5 @@
 import a from "m1/a";
+import object from "lodash/fp/object";
 
 console.log(a);
 console.log("hello");

__tests__/fixtures/main3-c.js

@@ -1,6 +1,7 @@
 import a from "m1/a";
+import object from "lodash/fp/object";
 
 console.log(a);
 console.log("hello");
 
-import("./a").then(a => console.log(a));
+import("./a").then((a) => console.log(a));

__tests__/fixtures/main3-d.js

@@ -1,8 +1,9 @@
 import a from "m1/a";
+import object from "lodash/fp/object";
 import $ from "jquery";
 
 console.log(a);
 console.log("hello");
 console.log($);
 
-import("./a").then(a => console.log(a));
+import("./a").then((a) => console.log(a));

__tests__/unit/core/__snapshots__/Bento.test.ts.snap

@@ -174,6 +174,7 @@ Object {
       "./app/scripts/main.js",
     ],
   },
+  "mode": "development",
   "module": Object {
     "rules": Array [],
   },
@@ -189,15 +190,18 @@ Object {
       "options": Object {
         "cache": true,
         "chunks": "all",
+        "chunksSortMode": "auto",
         "compile": true,
         "excludeChunks": Array [],
         "favicon": false,
         "filename": "index.html",
         "hash": false,
         "inject": true,
+        "meta": Object {},
         "minify": false,
         "showErrors": true,
         "template": "<cwd>/node_modules/html-webpack-plugin/default_index.ejs",
+        "templateParameters": [Function templateParametersGenerator],
         "title": "Bento",
         "xhtml": false,
       },
@@ -219,6 +223,7 @@ Object {
       "./app/scripts/main.js",
     ],
   },
+  "mode": "production",
   "module": Object {
     "rules": Array [],
   },
@@ -234,15 +239,18 @@ Object {
       "options": Object {
         "cache": true,
         "chunks": "all",
+        "chunksSortMode": "auto",
         "compile": true,
         "excludeChunks": Array [],
         "favicon": false,
         "filename": "index.html",
         "hash": false,
         "inject": true,
+        "meta": Object {},
         "minify": false,
         "showErrors": true,
         "template": "<cwd>/node_modules/html-webpack-plugin/default_index.ejs",
+        "templateParameters": [Function templateParametersGenerator],
         "title": "Webpack App",
         "xhtml": false,
       },
@@ -251,15 +259,18 @@ Object {
       "options": Object {
         "cache": true,
         "chunks": "all",
+        "chunksSortMode": "auto",
         "compile": true,
         "excludeChunks": Array [],
         "favicon": false,
         "filename": "index.html",
         "hash": false,
         "inject": true,
+        "meta": Object {},
         "minify": false,
         "showErrors": true,
         "template": "<cwd>/node_modules/html-webpack-plugin/default_index.ejs",
+        "templateParameters": [Function templateParametersGenerator],
         "title": "should load",
         "xhtml": false,
       },
@@ -281,6 +292,7 @@ Object {
       "./app/scripts/main.js",
     ],
   },
+  "mode": "development",
   "module": Object {
     "rules": Array [],
   },

__tests__/unit/presets/__snapshots__/StandardBento.test.ts.snap

@@ -16,7 +16,11 @@ Object {
         "plugin": "clean-webpack-plugin",
       },
       Object {
-        "args": Array [],
+        "args": Array [
+          Object {
+            "filter": [Function filter],
+          },
+        ],
         "plugin": "webpack-manifest-plugin",
       },
       Object {
@@ -39,30 +43,7 @@ Object {
       },
       Object {
         "args": [Function anonymous],
-        "plugin": [Function ExtractTextPlugin],
-      },
-    ],
-    "production": Array [
-      Object {
-        "args": Array [
-          Object {
-            "minChunks": [Function minChunks],
-            "name": "vendor",
-          },
-        ],
-        "plugin": [Function CommonsChunkPlugin],
-      },
-      Object {
-        "args": Array [
-          Object {
-            "name": "runtime",
-          },
-        ],
-        "plugin": [Function CommonsChunkPlugin],
-      },
-      Object {
-        "args": [Function anonymous],
-        "plugin": "uglifyjs-webpack-plugin",
+        "plugin": [Function MiniCssExtractPlugin],
       },
     ],
   },