Differences between revisions 1 and 72 (spanning 71 versions)
Revision 1 as of 2019-07-29 07:05:34
Size: 732
Editor: Praveen A
Comment: Document webpack 4 transition
Revision 72 as of 2019-10-17 17:58:54
Size: 4456
Editor: Praveen A
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
Webpack 4 is ready in git and will be uploaded to experimental soon. ## page was renamed from Javascript/Nodejs/Webpack4
#language en
<<TableOfContents()>>

Webpack 4.30 is required for acorn 6 transition. Needs webassemblyjs - ITP [[DebianBug:942455]].

Webpack 4.7 is available in unstable.

== TODO ==

 1. Run tests (currently disabled because jest is not packaged).
Line 4: Line 14:
 1. Now `entry`, `output` and `mode` options are mandatory  1. Now `entry`, `output` options on command line are mandatory and we get a warning if `mode` option is not specified. Check `node-d3-request` ([[https://salsa.debian.org/js-team/node-d3-request/commit/83486896aef5b0e4063dbfa0eb53b29b051c39c9|commit]])
Line 6: Line 16:
 1. Debian package currently support only `development` mode. `production` mode requires migrating to `terser-webpack-plugin` as `uglifyjs-webpack-plugin` is broken currently (`uglify-es` is not packaged and there is an API change in `terser`, `uglifyjsOptions` is changed to `terserOptions`).  1. `entry` option in command line must have `./` prefix to directory path (`--entry src/index.js` will not work, but `--entry ./src/index.js` will work). See `node-turbolinks` [[https://salsa.debian.org/js-team/node-turbolinks/commit/b849e06da4e521443c71c43c22d783a1f7debba9|commit]].
 1. Output files are now created under dist directory by default.
 1. `node_modules/.cache` should be removed in clean target.
 1. `node-grunt-webpack` should be `>= 3.1`.
 1. `webpack.optimize.UglifyJsPlugin` has been removed, please use `config.optimization.minimize` instead. Check [[https://salsa.debian.org/js-team/node-axios/blob/5282cb7f2ab8cbec1e90dbce11cb63882377fda8/debian/patches/use-webpack4.patch|this patch]] or [[https://salsa.debian.org/js-team/node-source-map/commit/3d82f682ea09561a95d4413a04c8090d563bae99|this commit]] (where a single config file creates multiple output files and only one of them we need minimized). Replace "plugin" field with "optimization" or remove "plugin" field and just set "mode" to production.
 1. `configuration.module has an unknown property 'loaders'.` Change `loaders` to `rules` under `modules`. Example [[https://salsa.debian.org/js-team/node-trust-json-document/commit/41619e122a142099ce787270a90bc48ac639c0cb|commit]]
 1. Change `target web` to `target node` in `debian/rules` or `debian/webpack.config.js`. Example [[https://salsa.debian.org/js-team/node-d3-request/commit/bfc7f125b11391036dff7fb39c4ff6d200a41db0|d/rules commit]] and [[https://salsa.debian.org/utkarsh2102-guest/node-es6-promise/commit/9a7a2c12c69160a1a6db11d7544f3a560307799b|d/webpack.config.js commit]]
Line 8: Line 24:
== Examples == == Steps to build with webpack 4 ==
 1. clone repo from salsa (`gbp clone --pristine-tar`)
 1. Update `debian/control` and change webpack dependency to `>= 4~` to force building with webpack 4 (without this, package in unstable will be used).
 1. Build on experimental. See [[sbuild#Enabling_experimental]]
Line 10: Line 29:
Check `node-d3-request` ([[https://salsa.debian.org/js-team/node-d3-request/commit/83486896aef5b0e4063dbfa0eb53b29b051c39c9|commit]]) == Involved packages ==

Command used to find the list: `reverse-depends -b webpack`

=== Packages for upstream modification ===
 * node-trust-json-document
 * node-node-forge -- [[Kannan]] - done
 * node-handlebars
 * node-axios -- [[Kannan]] - doing
 * vue.js

=== Already compatible with webpack 4 ===
 * node-mocha (false positive, switched to rollup)
 * node-js-beautify (tested rebuild)
 * node-yarnpkg [[DebianBug:933498]]

=== Ready in unstable ===
 * node-rollup-plugin-alias (switched to rollup)
 * node-react-audio-player [[DebianBug:933633]]
 * node-d3-scale
 * node-d3-request
 * node-turbolinks
 * node-vue-resource
 * node-markdown-it-html5-embed
 * node-timeago.js
 * node-url-parse
 * node-fuzzaldrin-plus
 * node-es6-promise
 * node-jschardet
 * node-source-map
 * node-chai (minor todo: minify only .min.js)
 * node-prop-types
 * node-d3-queue
 * jekyll
 * node-dagre-layout
 * vue.js
 * node-dagre-d3-renderer
 * node-axios , node-handlebars [[DebianBug:933868]]

=== Ready with patch in BTS/git repo ===
 * node-matrix-js-sdk [[DebianBug:933662]]
 * leaflet-image [[DebianBug:933666]]
 * node-node-forge, node-jsonld, node-rdf-canonize [[DebianBug:933592]]
 * node-trust-json-document [[DebianBug:933626]]

=== Supported in new upstream release ===
 * rainloop [[DebianBug:933481]]

== Packages that needs to move to unstable with webpack 4 ==
 * pkg-js-tools (>= 0.8.4~) - ok
 * node-ajv (>= 6.1~) - ok
 * node-ajv-keywords (>= 3.1~) - ok
 * node-enhanced-resolve (>= 4.0~) - ok
 * node-micromatch (>= 3.1.8~) - skipped for later
 * node-schema-utils (>= 0.4.2~) - ok
 * node-tapable (>= 1.0~) - ok
 * node-uglifyjs-webpack-plugin (>= 1.3.0-4~) - ok
 * node-watchpack (>= 1.4~) - ok
 * node-chokidar (>= 2~) - ok

Webpack 4.30 is required for acorn 6 transition. Needs webassemblyjs - ITP 942455.

Webpack 4.7 is available in unstable.

TODO

  1. Run tests (currently disabled because jest is not packaged).

Major changes

  1. Now entry, output options on command line are mandatory and we get a warning if mode option is not specified. Check node-d3-request (commit)

  2. production and development are new modes and each has its on default options. production mode does minify by default.

  3. entry option in command line must have ./ prefix to directory path (--entry src/index.js will not work, but --entry ./src/index.js will work). See node-turbolinks commit.

  4. Output files are now created under dist directory by default.
  5. node_modules/.cache should be removed in clean target.

  6. node-grunt-webpack should be >= 3.1.

  7. webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. Check this patch or this commit (where a single config file creates multiple output files and only one of them we need minimized). Replace "plugin" field with "optimization" or remove "plugin" field and just set "mode" to production.

  8. configuration.module has an unknown property 'loaders'. Change loaders to rules under modules. Example commit

  9. Change target web to target node in debian/rules or debian/webpack.config.js. Example d/rules commit and d/webpack.config.js commit

Steps to build with webpack 4

  1. clone repo from salsa (gbp clone --pristine-tar)

  2. Update debian/control and change webpack dependency to >= 4~ to force building with webpack 4 (without this, package in unstable will be used).

  3. Build on experimental. See sbuild#Enabling_experimental

Involved packages

Command used to find the list: reverse-depends -b webpack

Packages for upstream modification

  • node-trust-json-document
  • node-node-forge -- Kannan - done

  • node-handlebars
  • node-axios -- Kannan - doing

  • vue.js

Already compatible with webpack 4

  • node-mocha (false positive, switched to rollup)
  • node-js-beautify (tested rebuild)
  • node-yarnpkg 933498

Ready in unstable

  • node-rollup-plugin-alias (switched to rollup)
  • node-react-audio-player 933633

  • node-d3-scale
  • node-d3-request
  • node-turbolinks
  • node-vue-resource
  • node-markdown-it-html5-embed
  • node-timeago.js
  • node-url-parse
  • node-fuzzaldrin-plus
  • node-es6-promise
  • node-jschardet
  • node-source-map
  • node-chai (minor todo: minify only .min.js)
  • node-prop-types
  • node-d3-queue
  • jekyll
  • node-dagre-layout
  • vue.js
  • node-dagre-d3-renderer
  • node-axios , node-handlebars 933868

Ready with patch in BTS/git repo

  • node-matrix-js-sdk 933662

  • leaflet-image 933666

  • node-node-forge, node-jsonld, node-rdf-canonize 933592

  • node-trust-json-document 933626

Supported in new upstream release

Packages that needs to move to unstable with webpack 4

  • pkg-js-tools (>= 0.8.4~) - ok

  • node-ajv (>= 6.1~) - ok

  • node-ajv-keywords (>= 3.1~) - ok

  • node-enhanced-resolve (>= 4.0~) - ok

  • node-micromatch (>= 3.1.8~) - skipped for later

  • node-schema-utils (>= 0.4.2~) - ok

  • node-tapable (>= 1.0~) - ok

  • node-uglifyjs-webpack-plugin (>= 1.3.0-4~) - ok

  • node-watchpack (>= 1.4~) - ok

  • node-chokidar (>= 2~) - ok