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
This commit is contained in:
Romain 'Ashley' Bonhomme 2019-05-17 02:49:22 -07:00 committed by Jeremy Thomas
parent fc8c21aa42
commit 12138cdd2a

View File

@ -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