From 48cbca1f6eb1bd16724ef70360d80ad146f066ef Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 25 Jan 2018 09:47:01 -0700 Subject: [PATCH] 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' } });