diff --git a/docs/documentation/customize/with-webpack.html b/docs/documentation/customize/with-webpack.html index 4a0df82e..e078e7c7 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 %}

@@ -104,6 +140,24 @@ module.exports = {

{% endcapture %} +{% capture step_3.5 %} +
+

+ Create a webpack.config.js file: +

+
+ +
+ {% highlight js %}{{ configv4 }}{% endhighlight %} +
+ +
+

+ This setup takes the src folder as input, and outputs in the dist folder. +

+
+{% endcapture %} + {% capture require_css %} require('./mystyles.scss'); {% endcapture %} @@ -174,10 +228,17 @@ Wrote CSS to /path/to/mybulma/css/mystyles.css
{% include components/step.html - title="3. Create a webpack config" + title="3. Create a webpack config (Webpack <= 3)" content=step_3 %} +
+ +{% include components/step.html + title="3.5. Create a webpack config (Webpack 4)" + content=step_3.5 +%} +
{% include components/step.html