<commit_before>#+TITLE: webpack

* Table of Contents :TOC_3_gh:
- [[#concepts][Concepts]]
- [[#entry][Entry]]
- [[#loaders][Loaders]]
  - [[#css-loader][css-loader]]
  - [[#style-loader][style-loader]]
  - [[#babel-loader][babel-loader]]
- [[#plugins][Plugins]]
  - [[#htmlwebpackplugin][HtmlWebpackPlugin]]
- [[#cli][CLI]]
- [[#configuration][Configuration]]
  - [[#mode][mode]]
- [[#development][Development]]
- [[#production][Production]]

* Concepts
- https://webpack.js.org/concepts/

#+BEGIN_SRC javascript
  const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
  const webpack = require('webpack'); //to access built-in plugins
  const path = require('path');

  const config = {
    entry: './path/to/my/entry/file.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'my-first-webpack.bundle.js'
    },
    module: {
      rules: [
        { test: /\.txt$/, use: 'raw-loader' }
      ]
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin(),
      new HtmlWebpackPlugin({template: './src/index.html'})
    ]
  };

  module.exports = config;
#+END_SRC

- ~entry~ indicates which module webpack should use to begin building out its internal dependency graph.
- ~output~ tells webpack where to emit the bundles it creates and how to name these files.
- ~module~ (loaders) is used to more than just JavaScript files
- ~plugins~ can be leveraged to perform a wider range of tasks.

* Entry
#+BEGIN_SRC javascript
  const config = {
    entry: {
      app: './src/app.js',
      vendors: './src/vendors.js'
    }
  };
#+END_SRC

#+BEGIN_SRC javascript
  const config = {
    entry: {
      pageOne: './src/pageOne/index.js',
      pageTwo: './src/pageTwo/index.js',
      pageThree: './src/pageThree/index.js'
    }
  };
#+END_SRC

* Loaders
- https://webpack.js.org/concepts/loaders/
- https://webpack.js.org/loaders/
- https://webpack.js.org/configuration/module/#module-rules

Loaders can be chained by passing multiple loaders,
which will be applied from *right to left* (last to first configured).

** css-loader
- https://github.com/webpack-contrib/css-loader

The ~css-loader~ interprets ~@import~ and ~url()~ like ~import/require()~ and will resolve them.
Actually do nothing with it.

** style-loader
- https://github.com/webpack-contrib/style-loader
- https://stackoverflow.com/questions/34039826/webpack-style-loader-vs-css-loader<commit_msg>Write about webpack.output<commit_after>#+TITLE: webpack

* Table of Contents :TOC_3_gh:
- [[#concepts][Concepts]]
- [[#entry][Entry]]
- [[#ouptut][Ouptut]]
  - [[#substitutions][substitutions]]
- [[#loaders][Loaders]]
  - [[#css-loader][css-loader]]
  - [[#style-loader][style-loader]]
  - [[#babel-loader][babel-loader]]
- [[#plugins][Plugins]]
  - [[#htmlwebpackplugin][HtmlWebpackPlugin]]
- [[#cli][CLI]]
- [[#configuration][Configuration]]
  - [[#mode][mode]]
- [[#development][Development]]
- [[#production][Production]]

* Concepts
- https://webpack.js.org/concepts/

#+BEGIN_SRC javascript
  const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
  const webpack = require('webpack'); //to access built-in plugins
  const path = require('path');

  const config = {
    entry: './path/to/my/entry/file.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'my-first-webpack.bundle.js'
    },
    module: {
      rules: [
        { test: /\.txt$/, use: 'raw-loader' }
      ]
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin(),
      new HtmlWebpackPlugin({template: './src/index.html'})
    ]
  };

  module.exports = config;
#+END_SRC

- ~entry~ indicates which module webpack should use to begin building out its internal dependency graph.
- ~output~ tells webpack where to emit the bundles it creates and how to name these files.
- ~module~ (loaders) is used to more than just JavaScript files
- ~plugins~ can be leveraged to perform a wider range of tasks.

* Entry
#+BEGIN_SRC javascript
  const config = {
    entry: {
      app: './src/app.js',
      vendors: './src/vendors.js'
    }
  };
#+END_SRC

#+BEGIN_SRC javascript
  const config = {
    entry: {
      pageOne: './src/pageOne/index.js',
      pageTwo: './src/pageTwo/index.js',
      pageThree: './src/pageThree/index.js'
    }
  };
#+END_SRC

* Ouptut
:REFERENCES:
- https://webpack.js.org/configuration/output/#output-filename
:END:

** substitutions
#+BEGIN_SRC js
  filename: "bundle.js"
  filename: "[name].bundle.js"
  filename: "[id].bundle.js"
  filename: "[name].[hash].bundle.js"
  filename: "[chunkhash].bundle.js"
#+END_SRC

* Loaders
- https://webpack.js.org/concepts/loaders/
- https://webpack.js.org/loaders/
- https://webpack.js.org/configuration/module/#module-rules

Loaders can be chained by passing multiple loaders,
which will be applied from *right to left* (last to first configured).

** css-loader
- https://github.com/webpack-contrib/css-loader

The ~css-loader~ interprets ~@import~ and ~url()~ like ~import/require()~ and will resolve them.
Actually do nothing with it.

** style-loader
- https://github.com/webpack-contrib/style-loader
- https://stackoverflow.com/questions/34039826/webpack-style-loader-vs-css-loader
{'fraction_non_alphanumeric': 0.16910069177555725, 'fraction_numerical': 0.0034588777863182167, 'mean_word_length': 3.4870689655172415, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 15, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5857356', 'n_tokens_mistral': 1790, 'n_tokens_neox': 1715, 'n_words': 391}