From 6b05750128c40a9f2ac31ffb020df8a3d0b3a3f8 Mon Sep 17 00:00:00 2001 From: nobuti Date: Tue, 25 Apr 2017 16:31:01 +0200 Subject: [PATCH] Split webpack configuration. We will need to refactor to DRY. --- webpack.config.js | 89 ------------------------------- webpack.dev.config.js | 114 ++++++++++++++++++++++++++++++++++++++++ webpack.prod.config.js | 115 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 229 insertions(+), 89 deletions(-) delete mode 100644 webpack.config.js create mode 100644 webpack.dev.config.js create mode 100644 webpack.prod.config.js diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index f1daac41aa..0000000000 --- a/webpack.config.js +++ /dev/null @@ -1,89 +0,0 @@ -const webpack = require('webpack'); -const {resolve} = require('path'); -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; -const PACKAGE = require('./package.json'); -const version = PACKAGE.version; - -const isProduction = process.env.NODE_ENV === 'production'; - -const isVendor = (module, count) => { - const userRequest = module.userRequest; - return userRequest && userRequest.indexOf('node_modules') >= 0; -}; - -const entryPoints = { - public_editor: './lib/assets/core/javascripts/cartodb3/public_editor.js', - dataset: './lib/assets/core/javascripts/cartodb3/dataset.js', - editor: './lib/assets/core/javascripts/cartodb3/editor.js' -}; - -module.exports = env => { - return { - entry: entryPoints, - output: { - filename: `${version}/[name].js`, - path: resolve(__dirname, 'dist') - }, - devtool: isProduction ? 'source-map' : 'eval-source-map', - plugins: [ - isProduction ? undefined : new BundleAnalyzerPlugin({ - analyzerMode: 'static' - }) - ].concat( - // For each entry point, we generate the vendor file - Object.keys(entryPoints) - .map(entry => new webpack.optimize.CommonsChunkPlugin({ - name: `${entry}_vendor`, - chunks: [entry], - minChunks: isVendor - })) - ) - .concat([ - new webpack.optimize.CommonsChunkPlugin({ - name: 'common', - chunks: Object.keys(entryPoints).map(n => `${n}_vendor`), - minChunks: (module, count) => { - return count >= Object.keys(entryPoints).length && isVendor(module); - } - }) - ]) - .concat( - // Extract common chuncks in the 3 entries - new webpack.optimize.CommonsChunkPlugin({ - children: true, - minChunks: Object.keys(entryPoints).length - }) - ) - .concat( - isProduction ? new webpack.optimize.UglifyJsPlugin({ - sourceMap: true, - beautify: false, - mangle: { - screw_ie8: true, - keep_fnames: true - }, - compress: { - screw_ie8: true - }, - comments: false - }) : undefined - ) - .filter(p => !!p), // undefined is not a valid plugin, so filter undefined values here - module: { - rules: [ - { - test: /\.tpl$/, - use: 'tpl-loader' - }, - { - test: /\.mustache$/, - use: 'raw-loader' - } - ] - }, - - node: { - fs: 'empty' // This fixes the error Module not found: Error: Can't resolve 'fs' - } - }; -}; diff --git a/webpack.dev.config.js b/webpack.dev.config.js new file mode 100644 index 0000000000..b6fa4ef12e --- /dev/null +++ b/webpack.dev.config.js @@ -0,0 +1,114 @@ +const webpack = require('webpack'); +const {resolve} = require('path'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const PACKAGE = require('./package.json'); +const version = PACKAGE.version; + +const stats = (env) => { + return env && env.stats; +}; + +const isVendor = (module, count) => { + const userRequest = module.userRequest; + return userRequest && userRequest.indexOf('node_modules') >= 0; +}; + +const entryPoints = { + embed: './lib/assets/core/javascripts/cartodb3/public_editor.js', + dataset: './lib/assets/core/javascripts/cartodb3/dataset.js', + builder: './lib/assets/core/javascripts/cartodb3/editor.js' +}; + +module.exports = env => { + return { + entry: entryPoints, + output: { + filename: `${version}/javascripts/[name].js`, + path: resolve(__dirname, 'public/assets') + }, + devtool: 'cheap-module-eval-source-map', + plugins: [ + stats(env) ? new BundleAnalyzerPlugin({ + analyzerMode: 'static' + }) : undefined + ].concat( + // For each entry point, we generate the vendor file + Object.keys(entryPoints) + .map(entry => new webpack.optimize.CommonsChunkPlugin({ + name: `${entry}_vendor`, + chunks: [entry], + minChunks: isVendor + })) + ) + .concat([ + // Extract common chuncks from the 3 vendor files + new webpack.optimize.CommonsChunkPlugin({ + name: 'common', + chunks: Object.keys(entryPoints).map(n => `${n}_vendor`), + minChunks: (module, count) => { + return count >= Object.keys(entryPoints).length && isVendor(module); + } + }), + + // Extract common chuncks from the 3 entry points + new webpack.optimize.CommonsChunkPlugin({ + children: true, + minChunks: Object.keys(entryPoints).length + }), + + new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + ['window.jQuery']: 'jquery' + }) + ]) + .filter(p => !!p), // undefined is not a valid plugin, so filter undefined values here + module: { + rules: [ + { + test: /\.js$/, + loader: 'shim-loader', + include: [ + resolve(__dirname, 'node_modules/cartodb.js') + ], + options: { + shim: { + 'wax.cartodb.js': { + exports: 'wax' + }, + 'html-css-sanitizer': { + exports: 'html' + } + } + } + }, + { + test: /\.tpl$/, + use: 'tpl-loader', + include: [ + resolve(__dirname, 'lib/assets/core/javascripts/cartodb3'), + resolve(__dirname, 'node_modules/cartodb.js'), + resolve(__dirname, 'node_modules/cartodb-deep-insights.js') + ] + }, + { + test: /\.mustache$/, + use: 'raw-loader', + include: [ + resolve(__dirname, 'lib/assets/core/javascripts/cartodb3'), + resolve(__dirname, 'node_modules/cartodb.js'), + resolve(__dirname, 'node_modules/cartodb-deep-insights.js') + ] + } + ] + }, + + node: { + fs: 'empty' // This fixes the error Module not found: Error: Can't resolve 'fs' + }, + + stats: { + warnings: false + } + }; +}; diff --git a/webpack.prod.config.js b/webpack.prod.config.js new file mode 100644 index 0000000000..0aa49af064 --- /dev/null +++ b/webpack.prod.config.js @@ -0,0 +1,115 @@ +const webpack = require('webpack'); +const {resolve} = require('path'); +const PACKAGE = require('./package.json'); +const version = PACKAGE.version; + +const isVendor = (module, count) => { + const userRequest = module.userRequest; + return userRequest && userRequest.indexOf('node_modules') >= 0; +}; + +const entryPoints = { + embed: './lib/assets/core/javascripts/cartodb3/public_editor.js', + dataset: './lib/assets/core/javascripts/cartodb3/dataset.js', + builder: './lib/assets/core/javascripts/cartodb3/editor.js' +}; + +module.exports = env => { + return { + entry: entryPoints, + output: { + filename: `${version}/javascripts/[name].js`, + path: resolve(__dirname, 'public/assets') + }, + devtool: 'source-map', + plugins: Object.keys(entryPoints) + .map(entry => new webpack.optimize.CommonsChunkPlugin({ + name: `${entry}_vendor`, + chunks: [entry], + minChunks: isVendor + })) + .concat([ + // Extract common chuncks from the 3 vendor files + new webpack.optimize.CommonsChunkPlugin({ + name: 'common', + chunks: Object.keys(entryPoints).map(n => `${n}_vendor`), + minChunks: (module, count) => { + return count >= Object.keys(entryPoints).length && isVendor(module); + } + }), + + // Extract common chuncks from the 3 entry points + new webpack.optimize.CommonsChunkPlugin({ + children: true, + minChunks: Object.keys(entryPoints).length + }), + + new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + ['window.jQuery']: 'jquery' + }), + + // Minify + new webpack.optimize.UglifyJsPlugin({ + sourceMap: true, + beautify: false, + mangle: { + screw_ie8: true, + keep_fnames: true + }, + compress: { + screw_ie8: true + }, + comments: false + }) + ]), + module: { + rules: [ + { + test: /\.js$/, + loader: 'shim-loader', + include: [ + resolve(__dirname, 'node_modules/cartodb.js') + ], + options: { + shim: { + 'wax.cartodb.js': { + exports: 'wax' + }, + 'html-css-sanitizer': { + exports: 'html' + } + } + } + }, + { + test: /\.tpl$/, + use: 'tpl-loader', + include: [ + resolve(__dirname, 'lib/assets/core/javascripts/cartodb3'), + resolve(__dirname, 'node_modules/cartodb.js'), + resolve(__dirname, 'node_modules/cartodb-deep-insights.js') + ] + }, + { + test: /\.mustache$/, + use: 'raw-loader', + include: [ + resolve(__dirname, 'lib/assets/core/javascripts/cartodb3'), + resolve(__dirname, 'node_modules/cartodb.js'), + resolve(__dirname, 'node_modules/cartodb-deep-insights.js') + ] + } + ] + }, + + node: { + fs: 'empty' // This fixes the error Module not found: Error: Can't resolve 'fs' + }, + + stats: { + warnings: false + } + }; +};