Merge pull request #130 from waysact/webpack-5

Webpack 5 support
waysact · Oct 13, 2020 · 1d6bfcd · 1d6bfcd
2 parents f9d76c0 + 1631ca6
commit 1d6bfcd
Show file tree

Hide file tree

Showing 18 changed files with 241 additions and 107 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -4,20 +4,28 @@ node_js:
   - 6
   - 8
   - 10
+  - 12
 addons:
   firefox: latest
 env:
   - WEBPACK_SUFFIX="@1" ETWP_SUFFIX="@1" HWP_SUFFIX="@2"
   - WEBPACK_SUFFIX="@2" ETWP_SUFFIX="@2" HWP_SUFFIX="@2"
   - WEBPACK_SUFFIX="@3" ETWP_SUFFIX="@3" HWP_SUFFIX="@2"
   - WEBPACK_SUFFIX="@4" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@3"
-  - WEBPACK_SUFFIX="@4" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4.0.0-alpha.2"
+  - WEBPACK_SUFFIX="@4" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4"
+  - WEBPACK_SUFFIX="@5" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4"
 matrix:
   exclude:
   - node_js: 4
     env: WEBPACK_SUFFIX="@4" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@3"
   - node_js: 4
-    env: WEBPACK_SUFFIX="@4" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4.0.0-alpha.2"
+    env: WEBPACK_SUFFIX="@4" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4"
+  - node_js: 4
+    env: WEBPACK_SUFFIX="@5" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4"
+  - node_js: 6
+    env: WEBPACK_SUFFIX="@5" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4"
+  - node_js: 8
+    env: WEBPACK_SUFFIX="@5" ETWP_SUFFIX="@4.0.0-alpha.0" HWP_SUFFIX="@4"
 install:
   - npm install || true
   - npm rm webpack extract-text-webpack-plugin eslint
@@ -29,7 +37,6 @@ before_script:
 services:
   - xvfb
 script:
-  - ./node_modules/karma/bin/karma start --single-run --browsers Firefox
   - $(npm bin)/nyc $(npm bin)/mocha --exit --timeout 20000 && $(npm bin)/nyc report --reporter=text-lcov | $(npm bin)/coveralls
 notifications:
   webhooks:

diff --git a/README.md b/README.md
@@ -11,16 +11,20 @@ manipulation.
 
 ## Features
 
-- Optional integration with [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
-- Automatic support for code splitting (integrity for lazy-loaded chunks)
-- Compatible with Webpack 1.x, 2.x, 3.x and 4.x
+- Optional integration with [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin).
+- Automatic support for dynamic imports (also known as code splitting.)
+- Compatible with all major Webpack versions, up to and including Webpack 5.
 
 ## Installation
 
 ```shell
 npm install webpack-subresource-integrity --save-dev
 ```
 
+```shell
+yarn add --dev webpack-subresource-integrity
+```
+
 ### Webpack Configuration Example
 
 ```javascript
@@ -81,9 +85,11 @@ template as follows:
 #### Without HtmlWebpackPlugin
 
 The correct value for the `integrity` attribute can be retrieved from
-the `integrity` property of Webpack assets.  However, that property is
-not copied over by Webpack's `stats` module so you'll have to access
-the "original" asset on the `compilation` object.  For example:
+the `integrity` property of Webpack assets.
+
+Note that with Webpack versions before 5, that property is not copied over by
+Webpack's `stats` module so you'll have to access the "original" asset on the
+`compilation` object.  For example:
 
 ```javascript
 compiler.plugin("done", stats => {

diff --git a/appveyor.yml b/appveyor.yml
@@ -1,21 +1,6 @@
 # Test against this version of Node.js
 environment:
   matrix:
-    - nodejs_version: 4
-      WEBPACK_SUFFIX: '@1'
-      ETWP_SUFFIX: '@1'
-      FL_SUFFIX: '@0'
-      HWP_SUFFIX: '@2'
-    - nodejs_version: 4
-      WEBPACK_SUFFIX: '@2'
-      ETWP_SUFFIX: '@2'
-      FL_SUFFIX: '@1'
-      HWP_SUFFIX: '@2'
-    - nodejs_version: 4
-      WEBPACK_SUFFIX: '@3'
-      ETWP_SUFFIX: '@3'
-      FL_SUFFIX: '@1'
-      HWP_SUFFIX: '@2'
     - nodejs_version: 6
       WEBPACK_SUFFIX: '@1'
       ETWP_SUFFIX: '@1'
@@ -40,7 +25,7 @@ environment:
       WEBPACK_SUFFIX: '@4'
       ETWP_SUFFIX: '@4.0.0-alpha.0'
       FL_SUFFIX: '@1'
-      HWP_SUFFIX: '@4.0.0-alpha.2'
+      HWP_SUFFIX: '@4'
     - nodejs_version: 8
       WEBPACK_SUFFIX: '@1'
       ETWP_SUFFIX: '@1'
@@ -65,7 +50,7 @@ environment:
       WEBPACK_SUFFIX: '@4'
       ETWP_SUFFIX: '@4.0.0-alpha.0'
       FL_SUFFIX: '@1'
-      HWP_SUFFIX: '@4.0.0-alpha.2'
+      HWP_SUFFIX: '@4'
     - nodejs_version: 10
       WEBPACK_SUFFIX: '@1'
       ETWP_SUFFIX: '@1'
@@ -90,14 +75,50 @@ environment:
       WEBPACK_SUFFIX: '@4'
       ETWP_SUFFIX: '@4.0.0-alpha.0'
       FL_SUFFIX: '@1'
-      HWP_SUFFIX: '@4.0.0-alpha.2'
+      HWP_SUFFIX: '@4'
+    - nodejs_version: 10
+      WEBPACK_SUFFIX: '@5'
+      ETWP_SUFFIX: '@4.0.0-alpha.0'
+      FL_SUFFIX: '@1'
+      HWP_SUFFIX: '@4'
+    - nodejs_version: 12
+      WEBPACK_SUFFIX: '@1'
+      ETWP_SUFFIX: '@1'
+      FL_SUFFIX: '@0'
+      HWP_SUFFIX: '@2'
+    - nodejs_version: 12
+      WEBPACK_SUFFIX: '@2'
+      ETWP_SUFFIX: '@2'
+      FL_SUFFIX: '@1'
+      HWP_SUFFIX: '@2'
+    - nodejs_version: 12
+      WEBPACK_SUFFIX: '@3'
+      ETWP_SUFFIX: '@3'
+      FL_SUFFIX: '@1'
+      HWP_SUFFIX: '@2'
+    - nodejs_version: 12
+      WEBPACK_SUFFIX: '@4'
+      ETWP_SUFFIX: '@4.0.0-alpha.0'
+      FL_SUFFIX: '@1'
+      HWP_SUFFIX: '@3'
+    - nodejs_version: 12
+      WEBPACK_SUFFIX: '@4'
+      ETWP_SUFFIX: '@4.0.0-alpha.0'
+      FL_SUFFIX: '@1'
+      HWP_SUFFIX: '@4'
+    - nodejs_version: 12
+      WEBPACK_SUFFIX: '@5'
+      ETWP_SUFFIX: '@4.0.0-alpha.0'
+      FL_SUFFIX: '@1'
+      HWP_SUFFIX: '@4'
 
 # Install scripts. (runs after repo cloning)
 install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install modules
-  - appveyor-retry npm install --global npm@3
+  - npm cache clean --force
+  - appveyor-retry npm install --global npm@6
   - npm install || true
   - npm rm webpack extract-text-webpack-plugin file-loader eslint
   - npm install "webpack%WEBPACK_SUFFIX%" --ignore-scripts --loglevel=error || true
@@ -111,7 +132,7 @@ test_script:
   - node --version
   - npm --version
   # run tests
-  - npm run mocha
+  - npm run test
 
 # Don't actually build.
 build: off
diff --git a/examples/disabled/webpack.config.js b/examples/disabled/webpack.config.js
@@ -1,21 +1,9 @@
 var SriPlugin = require('webpack-subresource-integrity');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var createExtractTextLoader = require('../utils').createExtractTextLoader;
-var webpackVersion = Number(
-  require('webpack/package.json').version.split('.')[0]
-);
 
 module.exports = {
   entry: './index.js',
   output: {
     filename: 'bundle.js'
   },
-  module:
-    webpackVersion > 1
-      ? { rules: [{ test: /\.css$/, use: createExtractTextLoader() }] }
-      : { loaders: [{ test: /\.css$/, loader: createExtractTextLoader() }] },
-  plugins: [
-    new ExtractTextPlugin('styles.css'),
-    new SriPlugin({ hashFuncNames: ['sha256'], enabled: false })
-  ]
+  plugins: [new SriPlugin({ hashFuncNames: ['sha256'], enabled: false })]
 };
diff --git a/examples/etp-content-hash/test.js b/examples/etp-content-hash/test.js
@@ -1,4 +1,12 @@
 var expect = require('expect');
+var webpackVersion = Number(
+  require('webpack/package.json').version.split('.')[0]
+);
+
+module.exports.skip = function skip() {
+  // Can't use extract-text-webpack-plugin with Webpack > 4.
+  return webpackVersion > 4;
+};
 
 module.exports.check = function check(stats) {
   expect(stats.compilation.warnings).toEqual([]);

diff --git a/examples/etp-path-join/test.js b/examples/etp-path-join/test.js
@@ -1,4 +1,12 @@
 var expect = require('expect');
+var webpackVersion = Number(
+  require('webpack/package.json').version.split('.')[0]
+);
+
+module.exports.skip = function skip() {
+  // Can't use extract-text-webpack-plugin with Webpack > 4.
+  return webpackVersion > 4;
+};
 
 module.exports.check = function check(stats) {
   expect(stats.compilation.warnings).toEqual([]);

diff --git a/examples/hwp-custom-template/test.js b/examples/hwp-custom-template/test.js
@@ -2,6 +2,14 @@ var select = require('soupselect').select;
 var expect = require('expect');
 var htmlparser = require('htmlparser');
 var fs = require('fs');
+var webpackVersion = Number(
+  require('webpack/package.json').version.split('.')[0]
+);
+
+module.exports.skip = function skip() {
+  // Can't use extract-text-webpack-plugin with Webpack > 4.
+  return webpackVersion > 4;
+};
 
 module.exports.check = function check(stats) {
   var jsIntegrity;

diff --git a/examples/hwp-integrity-attributes/test.js b/examples/hwp-integrity-attributes/test.js
@@ -2,6 +2,14 @@ var select = require('soupselect').select;
 var expect = require('expect');
 var htmlparser = require('htmlparser');
 var fs = require('fs');
+var webpackVersion = Number(
+  require('webpack/package.json').version.split('.')[0]
+);
+
+module.exports.skip = function skip() {
+  // Can't use extract-text-webpack-plugin with Webpack > 4.
+  return webpackVersion > 4;
+};
 
 module.exports.check = function check(stats) {
   var jsIntegrity;

diff --git a/examples/hwp-output-parent-dir/test.js b/examples/hwp-output-parent-dir/test.js
@@ -7,7 +7,10 @@ module.exports.check = function check(stats) {
   var jsIntegrity;
 
   expect(stats.compilation.warnings).toEqual([]);
-  jsIntegrity = stats.compilation.assets['bundle.js'].integrity;
+
+  jsIntegrity =
+    stats.toJson().assets.find(asset => asset.name === 'bundle.js').integrity ||
+    stats.compilation.assets['bundle.js'].integrity;
   expect(jsIntegrity).toMatch(/^sha/);
 
   return new Promise((resolve, reject) => {

diff --git a/examples/hwp-public-path/test.js b/examples/hwp-public-path/test.js
@@ -7,7 +7,9 @@ module.exports.check = function check(stats) {
   var jsIntegrity;
 
   expect(stats.compilation.warnings).toEqual([]);
-  jsIntegrity = stats.compilation.assets['bundle.js'].integrity;
+  jsIntegrity =
+    stats.toJson().assets.find(asset => asset.name === 'bundle.js').integrity ||
+    stats.compilation.assets['bundle.js'].integrity;
   expect(jsIntegrity).toMatch(/^sha/);
 
   return new Promise((resolve, reject) => {

diff --git a/examples/hwp-subdirectories/test.js b/examples/hwp-subdirectories/test.js
@@ -4,7 +4,9 @@ var htmlparser = require('htmlparser');
 var fs = require('fs');
 
 module.exports.check = function check(stats) {
-  var jsIntegrity = stats.compilation.assets['subdir/bundle.js'].integrity;
+  var jsIntegrity =
+    stats.toJson().assets.find(asset => asset.name === 'subdir/bundle.js')
+      .integrity || stats.compilation.assets['subdir/bundle.js'].integrity;
   expect(jsIntegrity).toMatch(/^sha/);
 
   return new Promise((resolve, reject) => {

diff --git a/examples/mini-css-extract-plugin/test.js b/examples/mini-css-extract-plugin/test.js
@@ -4,5 +4,5 @@ var webpackVersion = Number(
 
 module.exports.skip = function skip() {
   // mini-css-extract-plugin needs Webpack 4
-  return webpackVersion < 4;
+  return webpackVersion !== 4;
 };
diff --git a/examples/no-error-invalid-config/test.js b/examples/no-error-invalid-config/test.js
@@ -1,5 +1,13 @@
 var expect = require('expect');
 var ChunkRenderError = require('webpack/lib/ChunkRenderError');
+var webpackVersion = Number(
+  require('webpack/package.json').version.split('.')[0]
+);
+
+module.exports.skip = function skip() {
+  // Error doesn't get triggered with Webpack > 4.
+  return webpackVersion > 4;
+};
 
 module.exports.ignoreErrors = true;
 

diff --git a/examples/no-error-invalid-config/webpack.config.js b/examples/no-error-invalid-config/webpack.config.js
@@ -1,5 +1,4 @@
 var SriPlugin = require('webpack-subresource-integrity');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   entry: './index.js',

diff --git a/examples/sourcemap-code-splitting/test.js b/examples/sourcemap-code-splitting/test.js
@@ -17,6 +17,6 @@ module.exports.check = function check() {
   }
 
   var sriHashesInSource = findAndStripSriHashString('dist/index.js', 'sha256-', -10);
-  var sriHashesInMap = findAndStripSriHashString('dist/index.js.map', 'var sriHashes = ');
+  var sriHashesInMap = findAndStripSriHashString('dist/index.js.map', '__webpack_require__.sriHashes = ');
   expect(sriHashesInSource.length).toEqual(sriHashesInMap.length);
 };