From 444f2847f7339dcd6b15195cb37f99bf2badbf52 Mon Sep 17 00:00:00 2001 From: LasaleFamine Date: Sun, 3 Dec 2017 12:12:45 +0100 Subject: [PATCH 1/2] feat(split-webpack): splitting webpack configuration --- package.json | 5 +- ...uild.config.js => webpack-module.config.js | 26 +------ webpack-nomodule.config.js | 34 +++++++++ webpack.config.js | 70 +++++++------------ yarn.lock | 6 ++ 5 files changed, 71 insertions(+), 70 deletions(-) rename webpack-module-build.config.js => webpack-module.config.js (57%) create mode 100644 webpack-nomodule.config.js diff --git a/package.json b/package.json index eaaba82..62f1380 100644 --- a/package.json +++ b/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" }, diff --git a/webpack-module-build.config.js b/webpack-module.config.js similarity index 57% rename from webpack-module-build.config.js rename to webpack-module.config.js index a597926..1ad515f 100644 --- a/webpack-module-build.config.js +++ b/webpack-module.config.js @@ -1,24 +1,16 @@ 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}) ]; @@ -26,12 +18,6 @@ const plugins = [ * === Webpack configuration */ module.exports = { - entry: './src/index.js', - output: { - path: outputPath, - filename: 'module.bundle.js' - }, - devtool: 'cheap-module-source-map', module: { rules: [ { @@ -50,14 +36,6 @@ module.exports = { ]] } } - }, - { - test: /\.html$/, - use: ['text-loader'] - }, - { - test: /\.postcss$/, - use: ['text-loader', 'postcss-loader'] } ] }, diff --git a/webpack-nomodule.config.js b/webpack-nomodule.config.js new file mode 100644 index 0000000..d81cdc9 --- /dev/null +++ b/webpack-nomodule.config.js @@ -0,0 +1,34 @@ +const {resolve, join} = require('path'); + + +/** + * === ENV configuration + */ +const BROWSERS = ['> 1%', 'last 2 versions', 'Firefox ESR', 'not ie <= 11']; + +/** + * === Webpack configuration + */ +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 + } + ]] + } + } + } + ] + } +}; diff --git a/webpack.config.js b/webpack.config.js index a42070a..6664995 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,19 +1,19 @@ 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,36 +25,36 @@ 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 }] }; @@ -62,14 +62,14 @@ const copyStatics = { /** * 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) @@ -77,35 +77,15 @@ const plugins = isDev ? [ 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 +98,7 @@ module.exports = { }, plugins, devServer: { - contentBase: resolve(outputPath), + contentBase: OUTPUT_PATH, compress: true, overlay: { errors: true @@ -128,3 +108,5 @@ module.exports = { disableHostCheck: true } }; + +module.exports = merge(IS_MODULE_BUILD ? moduleConf : nomoduleConf, SHARED); diff --git a/yarn.lock b/yarn.lock index ee424da..29dbeb1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9400,6 +9400,12 @@ webpack-dev-server@2.9.3: webpack-dev-middleware "^1.11.0" yargs "^6.6.0" +webpack-merge@4.1.1: + 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" From 782ad7641cf0a6bad5949a0166dc80f5e53c92ca Mon Sep 17 00:00:00 2001 From: LasaleFamine Date: Sun, 3 Dec 2017 12:20:34 +0100 Subject: [PATCH 2/2] cleanup and test fixes --- src/manifest.json | 3 ++- webpack-module.config.js | 11 ++--------- webpack-nomodule.config.js | 9 +-------- webpack.config.js | 2 ++ 4 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/manifest.json b/src/manifest.json index 535b387..5a67146 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,5 +1,6 @@ { - "name": "", + "name": "Polymer Skeleton", + "short_name": "SK", "icons": [{ "src": "/assets/icons/android-chrome-192x192.png", "sizes": "192x192", diff --git a/webpack-module.config.js b/webpack-module.config.js index 1ad515f..2aa16d5 100644 --- a/webpack-module.config.js +++ b/webpack-module.config.js @@ -1,22 +1,15 @@ +'use strict'; + const {resolve} = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); -/** - * === ENV configuration - */ const outputPath = resolve('dist'); const isDev = process.argv.find(arg => arg.includes('webpack-dev-server')); -/** - * Plugin configuration - */ const plugins = isDev ? [] : [ new CleanWebpackPlugin([outputPath], {verbose: true}) ]; -/** - * === Webpack configuration - */ module.exports = { module: { rules: [ diff --git a/webpack-nomodule.config.js b/webpack-nomodule.config.js index d81cdc9..a77675d 100644 --- a/webpack-nomodule.config.js +++ b/webpack-nomodule.config.js @@ -1,14 +1,7 @@ -const {resolve, join} = require('path'); +'use strict'; - -/** - * === ENV configuration - */ const BROWSERS = ['> 1%', 'last 2 versions', 'Firefox ESR', 'not ie <= 11']; -/** - * === Webpack configuration - */ module.exports = { module: { rules: [ diff --git a/webpack.config.js b/webpack.config.js index 6664995..8ec1c46 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,5 @@ +'use strict'; + const {resolve, join} = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge');