WordPress improvements

.vuepress/config.js

@@ -17,6 +17,7 @@ module.exports = {
           '/docs/styles.md',
           '/docs/icons.md',
           '/docs/utils.md',
+          '/docs/wordpress.md',
           '/docs/extending.md',
         ]
       }

docs/utils.md

@@ -8,7 +8,11 @@ To configure them, you can pass these options in your `webpack.config.js`:
 ```typescript
 features: {
   styles: {
-    browserSync?: boolean;
+    browserSync?: {
+      proxy: string;
+      host?: string;
+      port?: number;
+    };
     jquery?: 'internal' | 'external';
   }
 }
@@ -26,8 +30,9 @@ BrowserSync seems to get around it by overriding paths in every HTML generated
 by proxied site.
 
 In this package, we use `browser-sync-webpack-plugin` to create BrowserSync
-instance which proxies our `webpack-dev-server`, which in turn proxies our
-WordPress site. Pretty complicated, but works! :tada:
+instance which proxies our WordPress site. Pretty complicated, but works! :tada:
+
+You can read more [here](wordpress.md).
 
 ## Difference between internal or external jQuery
 
@@ -40,7 +45,7 @@ done by `external` option here.
 
 ::: warning
 
-When using this option, please make sure that jQuery is loaded before webpack in
-HTML.
+When using this option, please make sure that jQuery is loaded before
+webpack-generated assets in HTML.
 
 :::

docs/wordpress.md

@@ -0,0 +1,17 @@
+# Using with WordPress
+
+By default serving JS and CSS from `webpack-dev-server` does not work with
+WordPress due to absolute URL paths hardcoded in HTML. However,
+[BrowserSync](https://www.browsersync.io/) fixes this problem by replacing paths
+in HTML to proxied server. Because of that in WordPress we are using Webpack in
+watch mode (`webpack --watch`) with
+[`browser-sync-webpack-plugin`](https://github.com/Va1/browser-sync-webpack-plugin)
+enabled.
+
+There are few minor differences between this method and proxying with
+`webpack-dev-server`:
+
+* `webpack`-compiled assets are written to disk instead of memory,
+* BrowserSync doesn't reuse webpack-dev-server configuration, [so you have to
+  configure it in utils section](utils.md),
+* JS hot-reloading doesn't work (but CSS works).

package.json

@@ -38,6 +38,7 @@
     "webpack": "^4.31.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.1.14",
+    "webpack-fix-style-only-entries": "^0.2.1",
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {

src/@types/browser-sync-webpack-plugin.ts

@@ -11,9 +11,9 @@ declare module 'browser-sync-webpack-plugin' {
     }
     namespace BrowserSyncPlugin {
         interface IBrowserSyncOptions {
-          host: string;
-          port: number;
           proxy: string;
+          host?: string;
+          port?: number;
         }
 
         interface IBrowserSyncPluginOptions {

src/@types/webpack-fix-style-only-entries.ts

@@ -0,0 +1,19 @@
+/// <reference types="node" />
+
+declare module 'webpack-fix-style-only-entries' {
+  import * as webpack from 'webpack';
+
+  class WebpackFixStyleOnlyEntries extends webpack.Plugin {
+    constructor(options?: WebpackFixStyleOnlyEntries.IOptions);
+    public apply(compiler: webpack.Compiler): void;
+  }
+
+  namespace WebpackFixStyleOnlyEntries {
+    interface IOptions {
+      extensions?: string[];
+      silent?: boolean;
+    }
+  }
+
+  export = WebpackFixStyleOnlyEntries;
+}

src/configs/styles.ts

@@ -1,5 +1,6 @@
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as magicImporter from 'node-sass-magic-importer';
+import * as FixStyleOnlyEntriesPlugin from 'webpack-fix-style-only-entries';
 
 import { IConfiguration, WebpackMode } from '../defaultOptions';
 
@@ -19,26 +20,26 @@ export function styles({ styles: stylesConfig }: IConfiguration, mode: WebpackMo
 
   const fileRegex = stylesConfig.scss ? /\.(sa|sc|c)ss$/ : /\.css$/;
   const loaders = [
-    stylesConfig.extractToFile && mode === 'production'
-        ? MiniCssExtractPlugin.loader
-        : 'style-loader',
+    stylesConfig.extractToFile
+      ? MiniCssExtractPlugin.loader
+      : 'style-loader',
 
     'css-loader',
     'resolve-url-loader',
   ];
   const plugins = [];
 
+  plugins.push(new FixStyleOnlyEntriesPlugin());
+
   if (stylesConfig.scss) {
     loaders.push(sassLoader);
   }
 
   if (stylesConfig.extractToFile) {
-    plugins.push(
-            new MiniCssExtractPlugin({
-              filename: '[name].css',
-              chunkFilename: '[id].css',
-            }),
-        );
+    plugins.push(new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }));
   }
 
   return {

src/configs/utils.ts

@@ -3,14 +3,14 @@ import { Configuration as WebpackConfiguration, ProvidePlugin } from 'webpack';
 import { IConfiguration } from '../defaultOptions';
 
 export interface IUtilOptions {
-  browserSync?: boolean;
+  browserSync?: BrowserSyncPlugin.IBrowserSyncOptions;
   jquery?: 'internal' | 'external';
 }
 
 function validateConfig(config: IUtilOptions) {
   if (config.browserSync !== undefined) {
-    if (typeof config.browserSync !== 'boolean') {
-      throw new Error('Invalid option for browserSync, boolean should be passed.');
+    if (typeof config.browserSync !== 'object') {
+      throw new Error('Invalid option for browserSync, object should be passed.');
     }
   }
 
@@ -29,18 +29,9 @@ export function utils({ utils: utilsConfig }: IConfiguration) {
   if (utilsConfig.browserSync) {
     config.plugins = config.plugins || [];
 
-    config.plugins.push(
-            new BrowserSyncPlugin(
-              {
-                host: 'localhost',
-                port: 3000,
-                proxy: 'http://localhost:3100/',
-              },
-              {
-                reload: false,
-              },
-            ),
-        );
+    config.plugins.push(new BrowserSyncPlugin(utilsConfig.browserSync, {
+      reload: false,
+    }));
   }
 
   if (utilsConfig.jquery === 'external') {

src/configs/webpack.base.ts

@@ -7,7 +7,11 @@ const baseConfig = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: [['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }]],
+            presets: [['@babel/preset-env', {
+              modules: false,
+              useBuiltIns: 'usage',
+              corejs: 2,
+            }]],
           },
         },
       },

src/defaultOptions.ts

@@ -22,7 +22,5 @@ export const defaultOptions: IConfiguration = {
     extractToFile: true,
     scss: true,
   },
-  utils: {
-    browserSync: false,
-  },
+  utils: {},
 };

test/scss/test.spec.ts

@@ -18,44 +18,32 @@ it('should compile scss', async () => {
       },
     },
     'development',
-    );
+  );
   const output = stats.toJson();
 
   expect(output.assets.length).toBe(1);
+  expect(output.assets[0].name).toBe('main.js');
 });
 
-it('should not compile external scss on development', async () => {
-  const statsDevelopment = await compiler(
-    {
-      ...baseConfig,
-      features: {
-        styles: {
-          scss: true,
-          extractToFile: true,
-        },
+it('should extract scss', async () => {
+  const options =  {
+    ...baseConfig,
+    features: {
+      styles: {
+        scss: true,
+        extractToFile: true,
       },
     },
-    'development',
-    );
-  const output = statsDevelopment.toJson();
+  };
+  const productionStats = (await compiler(options, 'production')).toJson();
 
-  expect(output.assets.length).toBe(1);
-});
+  expect(productionStats.assets.length).toBe(2);
+  expect(productionStats.assets[0].name).toBe('main.css');
+  expect(productionStats.assets[1].name).toBe('main.js');
 
-it('should compile external scss on production', async () => {
-  const stats = await compiler(
-    {
-      ...baseConfig,
-      features: {
-        styles: {
-          scss: true,
-          extractToFile: true,
-        },
-      },
-    },
-    'production',
-    );
-  const output = stats.toJson();
+  const developmentStats = (await compiler(options, 'development')).toJson();
 
-  expect(output.assets.length).toBe(2);
+  expect(developmentStats.assets.length).toBe(2);
+  expect(developmentStats.assets[0].name).toBe('main.css');
+  expect(developmentStats.assets[1].name).toBe('main.js');
 });

yarn.lock

@@ -13479,6 +13479,11 @@ webpack-dev-server@^3.1.14:
     webpack-log "^2.0.0"
     yargs "12.0.2"
 
+webpack-fix-style-only-entries@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-fix-style-only-entries/-/webpack-fix-style-only-entries-0.2.1.tgz#c8945b034ea1e17407032de24b4f458f5d03b8b0"
+  integrity sha512-3e24v2C0/gquiHTZolVHdiAJKNxDnvqPyR4x2WAjbwMC7KPdACTn8YilcqsFYjHZtbaRmqOuh6kKqPmhsG+L8w==
+
 webpack-hot-client@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/webpack-hot-client/-/webpack-hot-client-3.0.0.tgz#b714f257a264001275bc1491741685779cde12f2"