Merge branch 'release/v1.1.6'

Author: andreashuber69

.gitignore

@@ -1,2 +1,5 @@
-dist/
-node_modules/
+/dist/
+/node_modules/
+/src/test/vue/dist/
+/src/test/vue/node_modules/
+/src/test/webpack/dist/

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 nodejs:
-- 10
+- 14
 
 branches:
   only:

README.md

@@ -8,8 +8,8 @@
   <a href="https://github.com/andreashuber69/async-css-plugin/releases/latest">
     <img src="https://img.shields.io/github/release-date/andreashuber69/async-css-plugin.svg" alt="Release Date">
   </a>
-  <a href="https://travis-ci.com/andreashuber69/async-css-plugin">
-    <img src="https://travis-ci.com/andreashuber69/async-css-plugin.svg?branch=develop" alt="Build">
+  <a href="https://travis-ci.com/github/andreashuber69/async-css-plugin">
+    <img src="https://travis-ci.com/andreashuber69/async-css-plugin.svg?branch=master" alt="Build">
   </a>
   <a href="https://github.com/andreashuber69/async-css-plugin/issues">
     <img src="https://img.shields.io/github/issues-raw/andreashuber69/async-css-plugin.svg" alt="Issues">
@@ -47,15 +47,19 @@ much better perceived responsiveness of your site.
 
 ## Prerequisites
 
-This plugin is designed for applications that are built using **[webpack](https://webpack.js.org/)**. More specifically,
-your application must satisfy **one** of the following conditions:
+This plugin is designed for applications that are built using **[webpack](https://v4.webpack.js.org/)**. More
+specifically, your application must satisfy **one** of the following conditions:
 
 - Your application is built using **webpack** directly or a framework that allows for the configuration of **webpack**
-  with *[webpack.config.js](https://webpack.js.org/configuration/)*.
+  with *[webpack.config.js](https://v4.webpack.js.org/configuration/)*.
 - Your application is built using a framework like **[Vue](https://vuejs.org)** that "abstracts away"
   *webpack.config.js* but provides a [different way](https://cli.vuejs.org/guide/webpack.html#chaining-advanced) to
   modify the **webpack** configuration.
 
+> This version of the plugin has so far only been tested with **webpack** v4 and **Vue** v2. Due to the fact that only a
+> very stable API of a plugin is used internally (namely `HtmlWebpackPlugin.getHooks`) it might work with projects that
+> are based on later versions of these frameworks but it hasn't been tested yet.
+
 ## Getting Started
 
 ### Installation
@@ -64,45 +68,70 @@ your application must satisfy **one** of the following conditions:
 
 ### Configuration
 
-`AsyncCssPlugin` configuration depends on how your project is set up, please see [Prerequisites](#Prerequisites) for
+`AsyncCssPlugin` configuration depends on how your project is set up, please see [Prerequisites](#prerequisites) for
 more information.
 
 #### webpack.config.js
 
-If your project does not yet contain *[webpack.config.js](https://webpack.js.org/configuration/)*, please create one in
-the same folder as *package.json*. Otherwise, please modify accordingly. `AsyncCssPlugin` depends on
-[HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/), so *webpack.config.js* should minimally look
-as follows:
+If your project does not yet contain *[webpack.config.js](https://v4.webpack.js.org/configuration/)*, please create one
+in the same folder as *package.json*. Otherwise, please modify accordingly. In order for webpack to generate HTML, you
+need to add [html-webpack-plugin](https://v4.webpack.js.org/plugins/html-webpack-plugin/). Moreover, for CSS to be
+generated into separate files it is recommended to use
+[mini-css-extract-plugin](https://v4.webpack.js.org/plugins/mini-css-extract-plugin/) and
+[css-loader](https://v4.webpack.js.org/loaders/css-loader/). You can add these dependencies as follows:
+
+`npm install html-webpack-plugin mini-css-extract-plugin css-loader --save-dev`
+
+Given the configuration recommendations for these plugins with added asynchronous CSS loading your *webpack.config.js*
+should minimally look something like this:
 
 ``` js
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const AsyncCssPlugin = require("async-css-plugin");
+const AsyncCssPlugin = require("async-css-plugin"); // Added for async CSS loading
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
+    entry: __dirname + "/index.js",
+    output: {
+        path: __dirname + "/dist",
+        filename: "index_bundle.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: [MiniCssExtractPlugin.loader, "css-loader"],
+            },
+        ],
+    },
     plugins: [
         new HtmlWebpackPlugin(),
-        new AsyncCssPlugin({ /* options */ })
+        new MiniCssExtractPlugin(),
+        new AsyncCssPlugin({ logLevel: "info" }), // Added for async CSS loading
     ]
 };
 ```
 
 #### vue.config.js
 
-If your **Vue** project does not yet contain *[vue.config.js](https://cli.vuejs.org/config/)*, please create one in the same
-folder as *package.json*. Otherwise, please adapt accordingly:
+If your **Vue** project does not yet contain *[vue.config.js](https://cli.vuejs.org/config/)*, please create one in the
+same folder as *package.json*. Otherwise, please adapt accordingly:
 
 ``` js
-const AsyncCssPlugin = require("async-css-plugin");
+const AsyncCssPlugin = require("async-css-plugin"); // Added for async CSS loading
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
     chainWebpack: config => {
-        config.plugin("async-css-plugin").use(AsyncCssPlugin, [{ /* options */ }]);
-    }
-}
+        // Added for async CSS loading
+        config.plugin("html-webpack-plugin").use(HtmlWebpackPlugin);
+        config.plugin("async-css-plugin").use(AsyncCssPlugin, [{ logLevel: "info" }]);
+    },
+};
 ```
 
-By default, **Vue** internally already uses [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/), so
-there should be no need to configure that in *vue.config.js*.
+By default, **Vue** already generates separate *.css* files, so there should be no need to make additional changes in
+*vue.config.js*.
 
 ## Usage
 

cspell.json

@@ -17,6 +17,7 @@
     "node_modules/**",
     "package.json",
     "package-lock.json",
+    "src/test/**/dist/**",
     "tsconfig.json"
   ]
 }