Webpack Memo

for your webpack start

Photo by Anete Lusina, Castleford, United Kingdom

First Step

Ок, go to your project folder and write in terminal:

npm init
npm i webpack webpack-cli -D
touch webpack.config.js

After that do you open package.json and add text:

"scripts": {
  "build": "webpack",
  "dev": "webpack --watch"
},

Ок, now do you оpen https://webpack.js.org & search this:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Add code above into the webpack.config.js.

After that add to your index.html:

<script src="dist/bundle.js"></script>

Congratulation! Base configuration webpack.config.js is ok.

Second Step

Let’s make a webpack launch. Do you write in terminal:

npm run build

For ease of debugging add this to webpack.config.js:

devtool: "eval-source-map",

Loaders

Loaders allows to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.

Action Plan

(see this docs: https://webpack.js.org/loaders/style-loader/)

1. Install loader (for example: style-loader)

npm install --save-dev style-loader

2. Add rules into the webpack.config.js:

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

3. Write a command in the Terminal:

npm run build

Plugins

Plugins are the backbone of webpack. webpack itself is built on the same plugin system that you use in your webpack configuration!

They also serve the purpose of doing anything else that a loader cannot do.

Usage: https://webpack.js.org/concepts/plugins/#usage

Install Html Webpack Plugin (for example)

Add this to webpack.config.js:

plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],

And add this constant too:

const HtmlWebpackPlugin = require('html-webpack-plugin');

npm run build

Npm Publish

a) Check your application name for uniqueness

b) Do it in Terminal:
npm publish

And, you have to be registered on https://www.npmjs.com/ of course