From 48cbca1f6eb1bd16724ef70360d80ad146f066ef Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 25 Jan 2018 09:47:01 -0700 Subject: [PATCH 1/6] Upgrade to Webpack 4 --- examples/webpack/config.js | 54 +++++------------------------ examples/webpack/example-builder.js | 22 +++--------- package.json | 13 ++++--- test/karma.config.js | 3 ++ 4 files changed, 23 insertions(+), 69 deletions(-) diff --git a/examples/webpack/config.js b/examples/webpack/config.js index 134d3fcb5e..92fe0fc0b1 100644 --- a/examples/webpack/config.js +++ b/examples/webpack/config.js @@ -1,10 +1,7 @@ -const MinifyPlugin = require('babel-minify-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const ExampleBuilder = require('./example-builder'); const fs = require('fs'); -const merge = require('webpack-merge'); const path = require('path'); -const webpack = require('webpack'); const src = path.join(__dirname, '..'); @@ -17,15 +14,17 @@ examples.forEach(example => { entry[example] = `./${example}.js`; }); -const main = { +module.exports = { context: src, target: 'web', entry: entry, - plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: 'common', + optimization: { + splitChunks: { + name: 'common', // TODO: figure out why this isn't working minChunks: 2 - }), + } + }, + plugins: [ new ExampleBuilder({ templates: path.join(__dirname, '..', 'templates'), common: 'common' @@ -38,45 +37,10 @@ const main = { {from: 'index.html', to: 'index.html'} ]) ], + // TODO: figure out why this hangs + // devtool: 'source-map', output: { filename: '[name].js', path: path.join(__dirname, '..', '..', 'build', 'examples') } }; - -// configuration specific to the dev environment -const dev = { - devtool: 'source-map', - plugins: [ - new webpack.EnvironmentPlugin( - Object.assign({NODE_ENV: 'development'}, process.env) - ) - ] -}; - -// configuration specific to the prod environment -const prod = { - plugins: [ - new webpack.EnvironmentPlugin( - Object.assign({NODE_ENV: 'production'}, process.env) - ), - new MinifyPlugin() - ] -}; - - -module.exports = env => { - let config; - - switch (env) { - case 'prod': { - config = merge(main, prod); - break; - } - default: { - config = merge(main, dev); - } - } - - return config; -}; diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js index 7b1c51dfd4..de392bdeb6 100644 --- a/examples/webpack/example-builder.js +++ b/examples/webpack/example-builder.js @@ -5,6 +5,7 @@ const marked = require('marked'); const path = require('path'); const pkg = require('../../package.json'); const promisify = require('util').promisify; +const RawSource = require('webpack-sources').RawSource; const readFile = promisify(fs.readFile); const isCssRegEx = /\.css$/; @@ -77,7 +78,7 @@ function ExampleBuilder(config) { * @param {Object} compiler The webpack compiler. */ ExampleBuilder.prototype.apply = function(compiler) { - compiler.plugin('emit', async (compilation, callback) => { + compiler.hooks.emit.tapPromise('ExampleBuilder', async (compilation) => { const chunks = compilation.getStats().toJson().chunks .filter(chunk => chunk.names[0] !== this.common); @@ -94,19 +95,11 @@ ExampleBuilder.prototype.apply = function(compiler) { }); for (const file in assets) { - compilation.assets[file] = { - source: () => assets[file], - size: () => assets[file].length - }; + compilation.assets[file] = new RawSource(assets[file]); } }); - try { - await Promise.all(promises); - } catch (err) { - callback(err); - return; - } + await Promise.all(promises); const info = { examples: exampleData, @@ -114,12 +107,7 @@ ExampleBuilder.prototype.apply = function(compiler) { }; const indexSource = `var info = ${JSON.stringify(info)}`; - compilation.assets['index.js'] = { - source: () => indexSource, - size: () => indexSource.length - }; - - callback(); + compilation.assets['index.js'] = new RawSource(indexSource); }); }; diff --git a/package.json b/package.json index aa7ee34147..6026d7a032 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "posttest": "npm run typecheck", "test": "npm run karma -- --single-run", "karma": "karma start test/karma.config.js", - "serve-examples": "mkdir -p build/examples && webpack --config examples/webpack/config.js --watch & serve build/examples", - "build-examples": "webpack --config examples/webpack/config.js --env=prod", + "serve-examples": "mkdir -p build/examples && webpack --config examples/webpack/config.js --mode development --watch & serve build/examples", + "build-examples": "webpack --config examples/webpack/config.js --mode production", "build-index": "node tasks/generate-index", "prebuild": "npm run build-index", "build": "rollup --config config/rollup.js", @@ -47,9 +47,8 @@ "babel-core": "^6.26.3", "babel-minify-webpack-plugin": "^0.3.0", "babel-plugin-jsdoc-closure": "1.5.1", - "chaikin-smooth": "1.0.4", "clean-css-cli": "4.1.11", - "copy-webpack-plugin": "^4.0.1", + "copy-webpack-plugin": "^4.4.1", "coveralls": "3.0.1", "eslint": "4.19.1", "eslint-config-openlayers": "^9.2.0", @@ -59,7 +58,6 @@ "glob": "^7.1.2", "google-closure-compiler": "20180506.0.0", "handlebars": "4.0.11", - "html-webpack-plugin": "^3.0.1", "istanbul": "0.4.5", "jquery": "3.3.1", "jsdoc": "3.5.5", @@ -86,8 +84,9 @@ "sinon": "^5.0.1", "url-polyfill": "^1.0.13", "walk": "^2.3.9", - "webpack": "3.11.0", - "webpack-merge": "4.1.2" + "webpack": "^4.0.0", + "webpack-cli": "^2.0.9", + "webpack-sources": "^1.1.0" }, "eslintConfig": { "extends": "openlayers" diff --git a/test/karma.config.js b/test/karma.config.js index f00c51ac58..9288370a9d 100644 --- a/test/karma.config.js +++ b/test/karma.config.js @@ -56,6 +56,9 @@ module.exports = function(karma) { reporters: ['progress'], webpackMiddleware: { noInfo: true + }, + webpack: { + mode: 'development' } }); From f8abb5def1f23e3ce87f403a8a10d7eddec40802 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 8 Jun 2018 12:56:32 +0200 Subject: [PATCH 2/6] Update dependencies --- package.json | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 6026d7a032..9f79a330e2 100644 --- a/package.json +++ b/package.json @@ -41,12 +41,13 @@ "dependencies": { "pbf": "3.1.0", "pixelworks": "1.1.0", - "rbush": "2.0.2" + "rbush": "2.0.2", + "uglifyjs-webpack-plugin": "^1.2.5" }, "devDependencies": { "babel-core": "^6.26.3", - "babel-minify-webpack-plugin": "^0.3.0", "babel-plugin-jsdoc-closure": "1.5.1", + "chaikin-smooth": "^1.0.4", "clean-css-cli": "4.1.11", "copy-webpack-plugin": "^4.4.1", "coveralls": "3.0.1", @@ -67,7 +68,8 @@ "karma-firefox-launcher": "^1.1.0", "karma-mocha": "1.3.0", "karma-sauce-launcher": "1.2.0", - "karma-webpack": "3.0.0", + "karma-sourcemap-loader": "^0.3.7", + "karma-webpack": "4.0.0-beta.0", "marked": "0.4.0", "mocha": "5.2.0", "mustache": "^2.3.0", @@ -80,13 +82,12 @@ "rollup-plugin-node-resolve": "3.3.0", "rollup-plugin-sourcemaps": "0.4.2", "rollup-plugin-uglify": "4.0.0", - "serve": "^8.0.0", + "serve": "^8.1.1", "sinon": "^5.0.1", "url-polyfill": "^1.0.13", "walk": "^2.3.9", - "webpack": "^4.0.0", - "webpack-cli": "^2.0.9", - "webpack-sources": "^1.1.0" + "webpack": "4.12.0", + "webpack-cli": "^3.0.3" }, "eslintConfig": { "extends": "openlayers" From 649b7be4c27fc54464e3d1a0560f76e8f3505eb8 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 8 Jun 2018 12:57:38 +0200 Subject: [PATCH 3/6] Make common chunk (and sourcemap) work --- examples/webpack/config.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/webpack/config.js b/examples/webpack/config.js index 92fe0fc0b1..4b364697ae 100644 --- a/examples/webpack/config.js +++ b/examples/webpack/config.js @@ -19,8 +19,12 @@ module.exports = { target: 'web', entry: entry, optimization: { + runtimeChunk: { + name: 'common' + }, splitChunks: { - name: 'common', // TODO: figure out why this isn't working + name: 'common', + chunks: 'initial', minChunks: 2 } }, @@ -37,8 +41,7 @@ module.exports = { {from: 'index.html', to: 'index.html'} ]) ], - // TODO: figure out why this hangs - // devtool: 'source-map', + devtool: 'source-map', output: { filename: '[name].js', path: path.join(__dirname, '..', '..', 'build', 'examples') From 28372725906130365e0f020c01e0e00a36eadd80 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 8 Jun 2018 12:58:16 +0200 Subject: [PATCH 4/6] Make webpack4 module structure work --- examples/webpack/example-builder.js | 31 +++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js index de392bdeb6..e4df83ddc8 100644 --- a/examples/webpack/example-builder.js +++ b/examples/webpack/example-builder.js @@ -61,6 +61,28 @@ function createWordIndex(exampleData) { return index; } +/** + * Gets the source for the chunk that matches the jsPath + * @param {Object} chunk Chunk. + * @param {string} jsPath Path of the file. + * @return {string} The source. + */ +function getJsSource(chunk, jsPath) { + let jsSource; + for (let i = 0, ii = chunk.modules.length; i < ii; ++i) { + const module = chunk.modules[i]; + if (module.modules) { + jsSource = getJsSource(module, jsPath); + if (jsSource) { + return jsSource; + } + } + if (module.identifier == jsPath) { + return module.source; + } + } +} + /** * A webpack plugin that builds the html files for our examples. * @param {Object} config Plugin configuration. Requires a `templates` property @@ -130,14 +152,7 @@ ExampleBuilder.prototype.render = async function(dir, chunk) { // add in script tag const jsName = `${name}.js`; const jsPath = path.join(dir, jsName); - let jsSource; - for (let i = 0, ii = chunk.modules.length; i < ii; ++i) { - const module = chunk.modules[i]; - if (module.identifier == jsPath) { - jsSource = module.source; - break; - } - } + let jsSource = getJsSource(chunk, jsPath); jsSource = jsSource.replace(/'\.\.\/src\//g, '\''); if (data.cloak) { for (const entry of data.cloak) { From da755d9e84e706c2d89e7bc592ad922477f37898 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 8 Jun 2018 13:00:10 +0200 Subject: [PATCH 5/6] Make tests (and sourcemap) work with webpack4 --- test/index.html | 58 -------------------------------------------- test/index_test.js | 5 ++++ test/karma.config.js | 15 ++++++++---- 3 files changed, 15 insertions(+), 63 deletions(-) delete mode 100644 test/index.html create mode 100644 test/index_test.js diff --git a/test/index.html b/test/index.html deleted file mode 100644 index 9e79a0bb0a..0000000000 --- a/test/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - OL Spec Runner - - - - - -
- - - - - - - - - - - - - - - - - - diff --git a/test/index_test.js b/test/index_test.js new file mode 100644 index 0000000000..5203db1f25 --- /dev/null +++ b/test/index_test.js @@ -0,0 +1,5 @@ +// require all modules ending in ".test.js" from the +// current directory and all subdirectories +const testsContext = require.context('.', true, /\.test\.js$/); + +testsContext.keys().forEach(testsContext); diff --git a/test/karma.config.js b/test/karma.config.js index 9288370a9d..5416708aa8 100644 --- a/test/karma.config.js +++ b/test/karma.config.js @@ -39,26 +39,31 @@ module.exports = function(karma) { }, { pattern: path.resolve(__dirname, './test-extensions.js') }, { - pattern: '**/*.test.js' + pattern: path.resolve(__dirname, './index_test.js'), + watched: false }, { pattern: '**/*', included: false, watched: false } ], + exclude: [ + '**/*.test.js' + ], proxies: { '/rendering/': '/base/rendering/', '/spec/': '/base/spec/' }, preprocessors: { - '**/*.js': ['webpack'] + '**/*.js': ['webpack', 'sourcemap'] }, reporters: ['progress'], + webpack: { + devtool: 'inline-source-map', + mode: 'development' + }, webpackMiddleware: { noInfo: true - }, - webpack: { - mode: 'development' } }); From b2fef55ae9d07b33cd2d09f06aaae55fbf84f6df Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 8 Jun 2018 13:55:42 +0200 Subject: [PATCH 6/6] Move uglifyjs-webpack-plugin to devDependencies --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9f79a330e2..3c18f985ec 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,7 @@ "dependencies": { "pbf": "3.1.0", "pixelworks": "1.1.0", - "rbush": "2.0.2", - "uglifyjs-webpack-plugin": "^1.2.5" + "rbush": "2.0.2" }, "devDependencies": { "babel-core": "^6.26.3", @@ -84,6 +83,7 @@ "rollup-plugin-uglify": "4.0.0", "serve": "^8.1.1", "sinon": "^5.0.1", + "uglifyjs-webpack-plugin": "^1.2.5", "url-polyfill": "^1.0.13", "walk": "^2.3.9", "webpack": "4.12.0",