Webpack essentials

Background

Based on this video

Start with a npm project

1. Install
2. webpack and webpack-cli
3. Loaders - transform various types of source files ready for bundling
4. Plugins - transform the bundle after it's created
5. Configure
6. The entry point - into the source code
7. Loaders (from webpack)
8. Individual loader configuration (e.g. babel)
9. Output - where the bundle goes
10. Mode - production or dev
11. How to run webpack: npm run build OR npm run start

Installation

1. Initialise the project - npm init
2. npm install webpack webpack-cli --save-dev
3. Loaders
4. npm install svg-inline-loader --save-dev
5. npm install css-loader style-loader --save-dev
6. npm install babel-loader --save-dev
7. npm install html-webpack-plugin --save-dev
8. Dev server
9. npm install webpack-dev-server --save-dev
10. babel https://www.robinwieruch.de/webpack-babel-setup-tutorial
11. npm i -D @babel/core @babel/present-env
12. npm i -D babel-loader (the webpack loader for babel)

Configuration file

// webpack.config.js 
const HtmlWebPackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    entry: './app/index.js',
    module: {
        rules: [
            { test: /\.svg$/, use: 'svg-inline-loader' },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader'] },
            { test: /\.js$/, use: 'babel-loader' }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin(),
    ],
    mode: process.env.NODE_ENV === 'production' ? 'production':'development',
    "scripts": {
        "build": "NODE_ENV='production' webpack",
    },
    output: {
        path: path.resolve( __dirname, 'dist'),
        filename: 'index_bundle.js' 
    }
}