What is Webpack Fundamentally

Is a module bundler.
Lets you write any module format and compiles them for the browser.
When you run webpack it will create a Dependency Graph, which will start at the entry point and then list off all the files that it depends on.
You can't use commonJS and ES syntax in the same file.
Entry: The first file to lead to the "kick off" your app is your entry point.
- Tells webpack what files to load for the browser.
- It is the root of the dependency graph.

Output: Tells webpack where and how to distribute bundles.

// webpack.config.js
module.exports = {
    // entry: ./browser.main.ts
    output: {
        path: './dist',
        filename: './bundle.js',
    },
    // ...
}
// Generates bundle.js

Loaders & Rules: Tells webpack how to modify files before its added to the dependency graphs.

Loaders are also JS modules that take the source file, and returns it in a modified state.

module: {
    rules: [
        {test: /\.ts$/, use: 'ts-loader'}, // how webpack can deal with typescript files...
        {
          test: regex,                    // instructs compiler which files to run the loader against
          use: (Array|String|Function),   // returns loader objects. When using an array, loaders are run from right to left (loader chaining)
          include: RegExp[],              // Array of regexps that instruct the compiler which folders/files to include
          exclude: RegExp[],              // Same as above but which folders/files to ignore
          issuer: (RegExp|String)[],
          enforce: "pre"|"post",
        }
    ]
}

Setting Up Debugging

{
    "scripts": {
        "webpack": "webpack",
        "debug": "node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js",
        "prod": "npm run webpack -- --mode production",
        "dev": "npm run webpack -- --mode development --watch",
        "prod:debug": "npm run debug -- --mode production",
        "dev:debug": "npm run debug -- --mode development"
    }
}

Running webpack will bundle our code and default to creating a main.js file in a dist directory.

Exports

Keep exports at the bottom.
Can use module.exports to set default exports.
Can use export.name = whatYouWantToExport to set your exports.

Tree Shaking

Webpack figures out what you're actually using and only bundles that.
Ignore unused imports and exports.

Plugins

Objects with an apply property.
Adds additional functionality to compilations.
Allows you to hook into the entire compilation lifecycle.
Webpack has a variety of built in plugins.
Webpack is built off of plugins which allows us to add new features and change things very easily.

Using Plugins

Helpful Plugins

To use css with webpack:

Includes the css in JavaScript file:

{
    test: /\.css$/,
    use: [ "style-loader", "css-loader"]
}

Includes css in dist as its own file:

{
  rules: [
      {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
  ]
  plugins: [
      new MiniCssExtractPlugin()
  ]}

To use images with webpack (imported as a base-64 data URI by default):
- Put an image in your src folder
- Use the rule below: The limit option here specifies that only files under 5000 bytes should be encoded. Larger files will just be included in the dist folder.
```
{
    test: /\.jpe?g/,
    use: [{
        loader: "url-loader",
        options: {limit: 5000}
    }]
}.
```

To apply webpack preset files, create the JavaScript file below and add applyPresets({mode, presets}) to the webpack.config.js file and then add --env.presets <presetName> to the scripts that you want to call with presets.

    /** loadPresets.js */
    const webpackMerge = require("webpack-merge");

    const applyPresets = env => {
    const {presets} = env;
    const mergedPresets = [].concat(...[presets]);
    const mergedConfigs = mergedPresets.map(
        presetName => require(`./presets/webpack.${presetName}`)(env)
    );

    return webpackMerge({}, ...mergedConfigs);
    }

    module.exports = applyPresets;

Return