Reconfigure webpack for pollyfilling and tree shaking (#37)

zeplin · Oct 28, 2020 · bddb3c1 · bddb3c1
1 parent 4e3bdd3
commit bddb3c1
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "chalk": "^2.3.1",
     "ci-info": "^2.0.0",
     "commander": "^2.14.1",
+    "core-js": "^3.6.4",
     "eslint": "^4.18.1",
     "eslint-loader": "^2.0.0",
     "fs-extra": "^5.0.0",

diff --git a/src/commands/create.js b/src/commands/create.js
@@ -78,6 +78,7 @@ const createPackageJson = (root, { packageName, description, displayName, platfo
         name: packageName,
         version: "0.1.0",
         description,
+        sideEffects: false,
         scripts: {
             start: "zem start",
             build: "zem build",

diff --git a/src/commands/test.js b/src/commands/test.js
@@ -10,7 +10,7 @@ module.exports = function (args) {
                     {
                         presets: [
                             [
-                                require.resolve("@babel/preset-env"),
+                                "@babel/preset-env",
                                 {
                                     targets: {
                                         node: "current"

diff --git a/src/config/webpack.common.js b/src/config/webpack.common.js
@@ -17,22 +17,29 @@ const copies = {
 const { eslintConfig, main: entryPoint } = require(resolveExtensionPath("package.json"));
 const eslintEnabled = eslintConfig || fs.readdirSync(extensionPath).find(f => f.startsWith(".eslintrc"));
 const jsLoaders = [{
-    loader: require.resolve("babel-loader"),
+    loader: "babel-loader",
     options: {
         presets: [
-            [require.resolve("@babel/preset-env"), {
-                targets: {
-                    chrome: 45,
-                    safari: "9.1",
-                    firefox: 45
+            [
+                "@babel/preset-env",
+                {
+                    useBuiltIns: "usage",
+                    corejs: 3,
+                    modules: false, // Should be false to run tree shaking. See: https://webpack.js.org/guides/tree-shaking/
+                    targets: {
+                        chrome: 62,
+                        safari: 11,
+                        firefox: 59,
+                        edge: 15
+                    }
                 }
-            }]
+            ]
         ]
     }
 }];
 
 if (eslintEnabled) {
-    jsLoaders.push(require.resolve("eslint-loader"));
+    jsLoaders.push("eslint-loader");
 }
 
 module.exports = {
@@ -59,4 +66,4 @@ module.exports = {
         }),
         new ManifestBuilder(extensionPath, bundleName)
     ]
-};
+};
diff --git a/src/config/webpack.prod.js b/src/config/webpack.prod.js
@@ -2,10 +2,8 @@ const merge = require("webpack-merge");
 const common = require("./webpack.common");
 
 module.exports = merge(common, {
+    mode: "production",
     output: {
         filename: "[name].[chunkhash:8].js"
-    },
-    optimization: {
-        minimize: true
     }
 });
diff --git a/src/template/src/fixtures/index.js b/src/template/src/fixtures/index.js
@@ -6,7 +6,7 @@ import componentsData from "./components.json";
 import versionData from "./version.json";
 import { zeplin } from "../../package.json";
 
-const defaultOptions = zeplin.options.reduce((options, option) => {
+const defaultOptions = zeplin.options?.reduce((options, option) => {
     options[option.id] = option.default;
     return options;
 }, {});