Extract CSS from JS bundle

config/webpack.common.js

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 const path = require("path");
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const babelLoader = {
   loader: "babel-loader",
   options: {
@@ -65,18 +66,22 @@ module.exports = {
       {
         test: /\.css$/,
         use: [
-          "style-loader",
+          MiniCssExtractPlugin.loader,
           "css-loader"
         ]
       },
       {
         test: /\.scss$/,
         use: [
-          "style-loader",
+          MiniCssExtractPlugin.loader,
           "css-loader",
           "sass-loader"
         ]
       },
+      {
+        test: /\.(woff|woff2)$/i,
+        loader: "url-loader",
+      },
       {
         test: /\.svg$/,
         use: ["svg-inline-loader"]

config/webpack.prod.js

@@ -18,6 +18,8 @@ const common = require('./webpack.common');
 const merge = require('webpack-merge');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 module.exports = merge.smart(common, {
   mode: "production",
@@ -26,9 +28,10 @@ module.exports = merge.smart(common, {
   },
   optimization: {
     minimize: true,
-    minimizer: [new TerserPlugin()],
+    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
   },
   plugins: [
+    new MiniCssExtractPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     }),

lib/style/_open-sans-600.scss → lib/style/_open-sans.scss

@@ -15,16 +15,22 @@
  * limitations under the License.
  */
 
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: local('Open Sans'), local('Open Sans Regular'), local('OpenSans-Regular'), local('Open-Sans-regular'),
+  url('../../lib/fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
+  url('../../lib/fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff');
+}
+
 @font-face {
   font-family: 'Open Sans';
   font-weight: 600;
   font-style: normal;
-  src: url('/fonts/Open-Sans-600/Open-Sans-600.eot');
-  src: url('/fonts/Open-Sans-600/Open-Sans-600.eot?#iefix') format('embedded-opentype'),
-  local('Open Sans Semibold'),
-  local('Open-Sans-600'),
-  url('/fonts/Open-Sans-600/Open-Sans-600.woff2') format('woff2'),
-  url('/fonts/Open-Sans-600/Open-Sans-600.woff') format('woff'),
-  url('/fonts/Open-Sans-600/Open-Sans-600.ttf') format('truetype'),
-  url('/fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans') format('svg');
+  font-display: swap;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), local('Open Sans Semibold'), local('Open-Sans-600'),
+  url('../../lib/fonts/Open-Sans-600/Open-Sans-600.woff2') format('woff2'),
+  url('../../lib/fonts/Open-Sans-600/Open-Sans-600.woff') format('woff');
 }