Webpack KT

Contains examples using webpack 5.

Compatibility

• Webpack runs from Node version 10.13+.
• The browser must support ES5 features.

---

Commands to start

git clone https://github.com/thiagofranchin/webpack-kt.git

cd webpack-kt

yarn | npm install

To start the development server

yarn dev | npm run dev

To build the project for production.

Open /dist/index.html in the browser and see the output of the /src/index.js file.

yarn prod | npm run prod

---

Install

yarn add webpack webpack-cli

package.json

"scripts": {
  "dev": "webpack --mode development --watch",
  "build": "webpack --mode production"
},

With different configuration

"scripts": {
  "dev": "webpack --config webpack.config.dev.js --watch",
  "prod": "webpack --config webpack.config.prod.js"
},

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // LOADER 1
      },
      {
        // LOADER 2
      }
    ]
  },
  plugins: [
    // PLUGIN 1
  ]
}

Loaders and Plugins

CSS and SASS

yarn add -D sass style-loader css-loader sass-loader

webpack.config.js

{
  test: /\.s?css$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

---

Remove CSS from JS

yarn add -D mini-css-extract-plugin

webpack.config.js

  {
    test: /\.s?css$/,
    use: [
      MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
    ]
  }
...
plugins: [
  new MiniCssExtractPlugin({
    filename: 'styles.css'
  })
]

---

Images

No need loaders for images.

Read more in Asset Modules

webpack.config.js

{
  test: /\.(png|jpg|jpeg|svg)$/,
  type: 'asset/resource'
},

---

HTML

yarn add -D html-loader

webpack.config.js

{
  test: /\.html$/,
  use: {
    loader: 'html-loader'
  }
}

---

TXT Files

yarn add -D raw-loader

webpack.config.js

{
  test: /\.txt$/,
  use: 'raw-loader'
}

---

JSON

• JSON files are standard webpack data.
• Don't need loaders.

register.json

{
  "name": "Sr(a). Webpack",
  "email": "[email protected]",
}

index.js

import register from './register.json';

document.body.innerHTML = `
  <h1>${register.name}</h1>
  <p>${register.email}</p>
`;

---

Minimize JavaScript in the Development Environment

• This configuration is used to test javascript in development environment.
• Production build already minimizes javascript automatically.
• Used, for example, to test the javascript performance

yarn add -D terser-webpack-plugin

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');
...
module.exports = {
  ...
  mode: 'development',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  },
  ...

---

Global Variables

• DefinePlugin is used to define global environment variables.
• It comes with webpack, no need to install it.

webpack.config.js

const webpack = require('webpack');

plugins: [
  ...
  new webpack.DefinePlugin({
    VERSION: JSON.stringify('1.0.0'),
    PORT: JSON.stringify('8080')
  })
]

index.js example:

document.body.innerHTML += `<p>Version: ${VERSION}</p>`
document.body.innerHTML += `<p>Port: ${PORT}</p>`

---

DotEnv

Create file .env and add environment variables.

.env example:

PORT=8080

webpack.config.js

yarn add -D dotenv-webpack

webpack.config.js

const DotenvPlugin = require('dotenv-webpack');
...

plugins: [
  ...
  new DotenvPlugin()
]

index.js example:

document.body.innerHTML += `<p>API KEY: ${process.env.API_KEY}</p>`

---

HtmlWebpackPlugin

Gererate html file with webpack.

yarn add -D html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
  ...
  new HtmlWebpackPlugin()
]

---

Control cache using [contenthash]

webpack.config.js

  filename: '[name].js?[contenthash]'

---

Remove unused files

yarn add -D clean-webpack-plugin

webpack.config.js

Make CleanWebpackPlugin the first plugin to run so that it erases old files before recreating them.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
...
plugins: [
  new CleanWebpackPlugin()
  ...
]

---

Webpack Dev Server

yarn add -D webpack-dev-server

package.json

"scripts": {
  "dev": "webpack serve --config webpack.config.dev.js",
  ...
},

webpack.config.dev.js

mode: 'development',
devServer: {
  static: {
    directory: path.resolve(__dirname, 'dist'),
  },
  port: 8080,
  historyApiFallback: {
    index: 'index.html'
  }
},

---

JQuery

Read more in Usage: jQuery

yarn add -D jquery

webpack.config.js

var webpack = require("webpack");
...

plugins: [
  ...
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
]

index.js example:

// The "import" is not needed if jquery was called in plugins in the webpack file
import $ from 'jquery';

$('h1').text('Hello World');

Useful links

• https://webpack.js.org/concepts/
• https://babeljs.io/docs/en/plugins
• https://babeljs.io/docs/en/plugins-list