<commit_before>---
title: With webpack
layout: documentation
doc-tab: customize
doc-subtab: webpack
breadcrumb:
- home
- documentation
- customize
- customize-webpack
---

{% capture dependencies %}
npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev
{% endcapture %}

{% capture package %}
{
  "name": "mybulma",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.7.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}
{% endcapture %}

{% capture step_2 %}
  <div class="content">
    <p>
      Install the packages required to parse and build your CSS:
    </p>
  </div>

  {% highlight bash %}{{ dependencies }}{% endhighlight %}

  <div class="content">
    <p>
      Your <code>package.json</code> should look like this at this point.
    </p>
  </div>

  {% highlight bash %}{{ package }}{% endhighlight %}
{% endcapture %}

{% capture config %}
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader',
          'sass-loader'
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/mystyles.css'),
  ]
};
{% 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><commit_msg>Fix typo in Webpack 4 configuration<commit_after>---
title: With webpack
layout: documentation
doc-tab: customize
doc-subtab: webpack
breadcrumb:
- home
- documentation
- customize
- customize-webpack
---

{% capture dependencies %}
npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev
{% endcapture %}

{% capture package %}
{
  "name": "mybulma",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.7.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}
{% endcapture %}

{% capture step_2 %}
  <div class="content">
    <p>
      Install the packages required to parse and build your CSS:
    </p>
  </div>

  {% highlight bash %}{{ dependencies }}{% endhighlight %}

  <div class="content">
    <p>
      Your <code>package.json</code> should look like this at this point.
    </p>
  </div>

  {% highlight bash %}{{ package }}{% endhighlight %}
{% endcapture %}

{% capture config %}
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader',
          'sass-loader'
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/mystyles.css'),
  ]
};
{% 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>
{'fraction_non_alphanumeric': 0.1798751655002837, 'fraction_numerical': 0.012672593153016833, 'mean_word_length': 2.3553299492385786, 'pattern_counts': {'":': 26, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '666545', 'n_tokens_mistral': 1899, 'n_tokens_neox': 1773, 'n_words': 388}