From: Romain 'Ashley' Bonhomme <romain.bonhomme89@gmail.com>
Date: Fri, 17 May 2019 09:49:22 +0000 (-0700)
Subject: Update docs with webpack 4 example (#2396)
X-Git-Tag: 0.7.5~42
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=12138cdd2a2548ec2e7522fc9129b3ac2ae218af;p=thirdparty%2Fbulma.git

Update docs with webpack 4 example (#2396)

* Update docs with webpack 4

Hello! Extract-text-plugin is deprecated in webpack 4 and onward in favor of Mini-css-extract: https://github.com/webpack-contrib/extract-text-webpack-plugin
So I edited your doc to include a webpack 4 example and indicated that the previous example is for webpack 3 and less

* Typo fixed

Typo fixed
---

diff --git a/docs/documentation/customize/with-webpack.html b/docs/documentation/customize/with-webpack.html
index 4a0df82ea..e078e7c78 100644
--- a/docs/documentation/customize/with-webpack.html
+++ b/docs/documentation/customize/with-webpack.html
@@ -86,6 +86,42 @@ module.exports = {
 };
 {% endcapture %}
 
+{% capture configv4 %}
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'js/bundle.js'
+  },
+  module: {
+    rules: [{
+      test: /\.scss$/,
+      use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              // options...
+            }
+          }
+        ]
+    }]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: css/[name].bundle.css'
+    }),
+  ]
+};
+{% endcapture %}
+
 {% capture step_3 %}
   <div class="content">
     <p>
@@ -104,6 +140,24 @@ module.exports = {
   </div>
 {% endcapture %}
 
+{% capture step_3.5 %}
+  <div class="content">
+    <p>
+      Create a <code>webpack.config.js</code> file:
+    </p>
+  </div>
+
+  <div class="highlight-full">
+    {% highlight js %}{{ configv4 }}{% endhighlight %}
+  </div>
+
+  <div class="content">
+    <p>
+      This setup takes the <code>src</code> folder as input, and outputs in the <code>dist</code> folder.
+    </p>
+  </div>
+{% endcapture %}
+
 {% capture require_css %}
 require('./mystyles.scss');
 {% endcapture %}
@@ -174,10 +228,17 @@ Wrote CSS to /path/to/mybulma/css/mystyles.css
 <hr>
 
 {% include components/step.html
-  title="3. Create a webpack config"
+  title="3. Create a webpack config (Webpack <= 3)"
   content=step_3
 %}
 
+<hr>
+    
+{% include components/step.html
+  title="3.5. Create a webpack config (Webpack 4)"
+  content=step_3.5
+%}
+
 <hr>
 
 {% include components/step.html