Merge pull request #92 from PolymerX/feat/webpack-merge

feat(split-webpack): splitting webpack configuration

package.json

@@ -10,8 +10,8 @@
     "Mattia Astorino (http://equinsuocha.io/)"
   ],
   "scripts": {
-    "prebuild": "NODE_ENV=production webpack --config webpack-module-build.config.js",
-    "build": "NODE_ENV=production webpack --optimize-minimize",
+    "prebuild": "BROWSERS=module webpack",
+    "build": "webpack --optimize-minimize",
     "dev": "webpack-dev-server --hot --inline",
     "dev:module": "BROWSERS=module webpack-dev-server --hot --inline",
     "pretest": "yarn linkbower && yarn build",
@@ -69,6 +69,7 @@
     "web-component-tester": "6.3.0",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.3",
+    "webpack-merge": "4.1.1",
     "workbox-webpack-plugin": "2.1.0",
     "xo": "0.18.2"
   },

src/manifest.json

@@ -1,5 +1,6 @@
 {
-  "name": "",
+  "name": "Polymer Skeleton",
+  "short_name": "SK",
   "icons": [{
       "src": "/assets/icons/android-chrome-192x192.png",
       "sizes": "192x192",

webpack-module-build.config.js → webpack-module.config.js

@@ -1,37 +1,16 @@
+'use strict';
+
 const {resolve} = require('path');
-const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
-const pkg = require('./package.json');
-
-/**
- * === ENV configuration
- */
-const ENV = process.env.NODE_ENV;
 const outputPath = resolve('dist');
-const processEnv = {
-  NODE_ENV: JSON.stringify(ENV),
-  appVersion: JSON.stringify(pkg.version)
-};
+const isDev = process.argv.find(arg => arg.includes('webpack-dev-server'));
 
-/**
- * Plugin configuration
- */
-const plugins = [
-  new webpack.DefinePlugin({'process.env': processEnv}),
+const plugins = isDev ? [] : [
   new CleanWebpackPlugin([outputPath], {verbose: true})
 ];
 
-/**
- * === Webpack configuration
- */
 module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: outputPath,
-    filename: 'module.bundle.js'
-  },
-  devtool: 'cheap-module-source-map',
   module: {
     rules: [
       {
@@ -50,14 +29,6 @@ module.exports = {
             ]]
           }
         }
-      },
-      {
-        test: /\.html$/,
-        use: ['text-loader']
-      },
-      {
-        test: /\.postcss$/,
-        use: ['text-loader', 'postcss-loader']
       }
     ]
   },

webpack-nomodule.config.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const BROWSERS = ['> 1%', 'last 2 versions', 'Firefox ESR', 'not ie <= 11'];
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        // We need to transpile Polymer itself and other ES6 code
+        // exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [[
+              'env',
+              {
+                targets: {browsers: BROWSERS},
+                debug: true
+              }
+            ]]
+          }
+        }
+      }
+    ]
+  }
+};

webpack.config.js

@@ -1,19 +1,21 @@
+'use strict';
+
 const {resolve, join} = require('path');
 const webpack = require('webpack');
+const merge = require('webpack-merge');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const pkg = require('./package.json');
 
-/**
- * === ENV configuration
- */
-const isDev = process.argv.find(arg => arg.includes('webpack-dev-server'));
-const ENV = isDev ? 'development' : 'production';
-const BROWSERS = process.env.BROWSERS === 'module' ?
-  ['last 2 Chrome versions', 'Safari 10'] : ['> 1%', 'last 2 versions', 'Firefox ESR', 'not ie <= 11'];
-const IS_MODULE_BUILD = BROWSERS[0].includes('Chrome');
-const outputPath = isDev ? resolve('src') : resolve('dist');
+const moduleConf = require('./webpack-module.config');
+const nomoduleConf = require('./webpack-nomodule.config');
+
+const ENV = process.env.NODE_ENV;
+const IS_DEV = process.argv.find(arg => arg.includes('webpack-dev-server'));
+const IS_MODULE_BUILD = process.env.BROWSERS === 'module';
+const OUTPUT_PATH = IS_DEV ? resolve('src') : resolve('dist');
+
 const processEnv = {
   NODE_ENV: JSON.stringify(ENV),
   appVersion: JSON.stringify(pkg.version)
@@ -25,87 +27,67 @@ const processEnv = {
 const copyStatics = {
   copyWebcomponents: [{
     from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js'),
-    to: join(outputPath, 'vendor'),
+    to: join(OUTPUT_PATH, 'vendor'),
     flatten: true
   }, {
     from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js'),
-    to: join(outputPath, 'vendor'),
+    to: join(OUTPUT_PATH, 'vendor'),
     flatten: true
   }, {
     from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js'),
-    to: join(outputPath, 'vendor'),
+    to: join(OUTPUT_PATH, 'vendor'),
     flatten: true
   }, {
     from: resolve('./node_modules/@webcomponents/webcomponentsjs/webcomponents-hi-sd-ce.js'),
-    to: join(outputPath, 'vendor'),
+    to: join(OUTPUT_PATH, 'vendor'),
     flatten: true
   }, {
     from: resolve('./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'),
-    to: join(outputPath, 'vendor'),
+    to: join(OUTPUT_PATH, 'vendor'),
     flatten: true
   }],
   copyOthers: [{
     from: 'assets/**',
     context: resolve('./src'),
-    to: outputPath
+    to: OUTPUT_PATH
   }, {
     from: resolve('./src/index.html'),
-    to: outputPath,
+    to: OUTPUT_PATH,
     flatten: true
   }, {
     from: resolve('./src/manifest.json'),
-    to: outputPath,
+    to: OUTPUT_PATH,
     flatten: true
   }]
 };
 
 /**
  * Plugin configuration
  */
-const plugins = isDev ? [
+const plugins = IS_DEV ? [
   new CopyWebpackPlugin(copyStatics.copyWebcomponents),
   new webpack.DefinePlugin({'process.env': processEnv})
 ] : [
   new WorkboxPlugin({
-    globDirectory: outputPath,
+    globDirectory: OUTPUT_PATH,
     globPatterns: ['**/*.{html, js, css, svg, png, woff, woff2, ttf}'],
-    swDest: join(outputPath, 'sw.js')
+    swDest: join(OUTPUT_PATH, 'sw.js')
   }),
   new CopyWebpackPlugin(
     [].concat(copyStatics.copyWebcomponents, copyStatics.copyOthers)
   ),
   new webpack.DefinePlugin({'process.env': processEnv})
 ];
 
-/**
- * === Webpack configuration
- */
-module.exports = {
+const SHARED = {
   entry: './src/index.js',
+  devtool: 'cheap-module-source-map',
   output: {
-    path: outputPath,
+    path: OUTPUT_PATH,
     filename: IS_MODULE_BUILD ? 'module.bundle.js' : 'bundle.js'
   },
-  devtool: 'cheap-module-source-map',
   module: {
     rules: [
-      {
-        test: /\.js$/,
-        // We need to transpile Polymer itself and other ES6 code
-        // exclude: /(node_modules)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [[
-              'env',
-              {
-                targets: {browsers: BROWSERS},
-                debug: true
-              }
-            ]]
-          }
-        }
-      },
       {
         test: /\.html$/,
         use: ['text-loader']
@@ -118,7 +100,7 @@ module.exports = {
   },
   plugins,
   devServer: {
-    contentBase: resolve(outputPath),
+    contentBase: OUTPUT_PATH,
     compress: true,
     overlay: {
       errors: true
@@ -128,3 +110,5 @@ module.exports = {
     disableHostCheck: true
   }
 };
+
+module.exports = merge(IS_MODULE_BUILD ? moduleConf : nomoduleConf, SHARED);

yarn.lock

@@ -9400,6 +9400,12 @@ [email protected]:
     webpack-dev-middleware "^1.11.0"
     yargs "^6.6.0"
 
+[email protected]:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555"
+  dependencies:
+    lodash "^4.17.4"
+
 webpack-sources@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"