Merge pull request #69 from remcohaszing/optimize-example

Optimize the example

examples/webpack/package.json

@@ -9,10 +9,11 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.2.0",
     "monaco-editor": "^0.26.1",
     "monaco-yaml": "file:../..",
-    "style-loader": "^3.2.1",
     "webpack": "^5.48.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"

examples/webpack/src/index.css

@@ -15,6 +15,7 @@ body {
   background: var(--background-color);
   display: flex;
   flex-flow: column;
+  font-family: sans-serif;
   height: 100vh;
   margin: 0;
 }
@@ -34,6 +35,10 @@ nav {
 }
 
 .nav-icon {
+  text-decoration: none;
+}
+
+.nav-icon > img {
   height: 2rem;
   margin-right: 1rem;
   vertical-align: middle;

examples/webpack/src/index.ejs

@@ -8,17 +8,15 @@
     <nav>
       <h1>Monaco YAML</h1>
       <div>
-        <a href="https://npmjs.com/package/monaco-yaml">
+        <a href="https://npmjs.com/package/monaco-yaml" class="nav-icon">
           <img
             alt="npm icon"
-            class="nav-icon"
             src="<%= require('@fortawesome/fontawesome-free/svgs/brands/npm.svg') %>"
           />
         </a>
-        <a href="https://github.com/remcohaszing/monaco-yaml">
+        <a href="https://github.com/remcohaszing/monaco-yaml" class="nav-icon">
           <img
             alt="GitHub icon"
-            class="nav-icon"
             src="<%= require('@fortawesome/fontawesome-free/svgs/brands/github.svg') %>"
           />
         </a>

examples/webpack/webpack.config.js

@@ -1,6 +1,11 @@
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
+  output: {
+    filename: '[contenthash].js',
+  },
   resolve: {
     fallback: {
       // Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
@@ -11,7 +16,7 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
       {
         // Monaco editor uses .ttf icons.
@@ -20,5 +25,8 @@ module.exports = {
       },
     ],
   },
-  plugins: [new HtmlWebPackPlugin()],
+  optimization: {
+    minimizer: ['...', new CssMinimizerPlugin()],
+  },
+  plugins: [new HtmlWebPackPlugin(), new MiniCssExtractPlugin({ filename: '[contenthash].css' })],
 };