<commit_before>---
layout: post
title:  "Getting known Webpack"
---
[Webpack](https://webpack.github.io/) is module bundler which can bundle your assets and javascripts to one or several files. 

We will now transform our previous SpringBootReact project to use webpack. [repository](https://github.com/juhahinkula/SpringBootReact.git)

Here is the steps that you have to do

1.) Create webpack configuration file (webpack.config.js) in the root directory

'entry' is the location of your code where webpack builds a dependency graph.
'output' is the location and name of the bundled file.

{% highlight javascript %}
module.exports = {
  entry: './src/main/webapp/public/App.jsx',
  output: {
    path: __dirname + '/src/main/webapp/public', 
    filename: 'bundle.js' 
}   
... 
{% endhighlight %}

2.) Add loaders to webpack configuration file

We will define to process files ending with .jsx to be processed by babel. Babel allows us to use ES6 features and JSX.

{% highlight javascript %}
 ...
 module: {
    loaders: [
      {
        test: /.jsx/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
  ---
{% endhighlight %}

3.) Initialize package.json file (root of the project)

{% highlight %}
npm init
{% endhighlight %}

<commit_msg>new post<commit_after>---
layout: post
title:  "Getting known Webpack"
---
[Webpack](https://webpack.github.io/) is module bundler which can bundle your assets and javascripts to one or several files. 

We will now transform our previous SpringBootReact project to use webpack. [repository](https://github.com/juhahinkula/SpringBootReact.git)

Here is the steps that you have to do

1.) Create webpack configuration file (webpack.config.js) in the root directory

'entry' is the location of your code where webpack builds a dependency graph.
'output' is the location and name of the bundled file.

{% highlight javascript %}
module.exports = {
  entry: './src/main/webapp/public/App.jsx',
  output: {
    path: __dirname + '/src/main/webapp/public', 
    filename: 'bundle.js' 
}   
... 
{% endhighlight %}

2.) Add loaders to webpack configuration file

We will define to process files ending with .jsx to be processed by babel. Babel allows us to use ES6 features and JSX.

{% highlight javascript %}
 ...
 module: {
    loaders: [
      {
        test: /.jsx/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
  ---
{% endhighlight %}

3.) Initialize package.json file (root of the project)

{% highlight html%}
npm init
{% endhighlight %}

4.) Install necessary dependencies

{% highlight html %}
npm install --save babel-loader
npm install --save babel-preset react
npm install --save babel-preset-es2015
npm install --save babel-core
npm install --save webpack
{% endhighlight %}

5.) Remove javascript imports from index.html file

6.) Remove text/babel and change App.jsx to bundle.js from index.html file

{% highlight html %}
<script src="/public/bundle.js"></script>
{% endhighlight %}

7.) install webpack globally and run it from the command line

{% highlight html %}
npm install -g webpack
{% endhighlight %}

{% highlight html %}
webpack
{% endhighlight %}

{'fraction_non_alphanumeric': 0.11440677966101695, 'fraction_numerical': 0.007263922518159807, 'mean_word_length': 3.1055900621118013, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 4, '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': '3726389', 'n_tokens_mistral': 1047, 'n_tokens_neox': 958, 'n_words': 367}