How to use webpack 4+

webpack.md

Here Learning the webpack

1. Steps to follow:

• npm init -y
• npm i -D webpack webpack-cli
• Create ./src/index.js file
• Edit package.json file, and add script 'build':'any message here'
• Run the command: npm run webpack

2. How to use it:

• npm i -D html-webpack-plugin html-loader

• Then add the following code to webpack.config.js file

  const HtmlWebPackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      module: {
          rules: [{
              test: /\.html$/,
              use: [{
                      loader: "html-loader",
                      options: {minimize: true}
                  }
              ]
          }]
      },
      plugins: [
          new HtmlWebPackPlugin({
              template: './src/index.html',
              filename: './index.html'
          }),
      ]
  }
  

• Create index.html file under src folder.

• Run the build command again: npm run build.

  • This will build the dist folder with index.html file in it.

• Install dev server:

  • run the npm command: npm i -D webpack-dev-server
  • add the following script to package.json:
    • "start:dev":"webpack-dev-server" into script.
    • Open the browser and check it out.

3. Add babel to project

• npm i -D @babel/core babel-loader @babel/preset-env

• To recognize the images asset, add the following dependency:

  • npm i -D file-loader

  • Add the following to package.json file:

    {
        test: /\.(png|jpg|svg|jpeg|gif)$/,
        use: [{
            loader: "file-loader"
        }]
    }

  • Add this line to index.html file

    <img src="images/sky.jpg" alt="Sky">

  • Run the build again:

    npm run build
    

• Process CSS:

  • npm i -D node-sass style-loader css-loader sass-loader mini-css-extract-plugin

  • Create style/main.sass file under src folder and add the following code:

    $bg: blue
    body 
        background-color: $bg

  • Add the import to the index.js file

    import './style/main.sass';

  • Run the build again.

4. The source code

• webpack.config.js file

  const HtmlWebPackPlugin = require('html-webpack-plugin');
  const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
  module.exports = {
      module: {
          rules: [
              {
                  test: /\.html$/,
                  use: [{
                          loader: "html-loader",
                          options: {minimize: true}
                      }
                  ]
              },
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: [{
                      loader: "babel-loader"
                  }]
              },
              {
                  test: /\.(png|jpg|svg|jpeg|gif)$/,
                  use: [{
                      loader: "file-loader"
                  }
                  ]
              },
              {
                  test: /\.sass$/,
                  use: [
                      "style-loader",
                      "css-loader",
                      "sass-loader"
                  ]
              }
          ]
      },
      plugins: [
          new HtmlWebPackPlugin({
              template: './src/index.html',
              filename: './index.html'
          }),
          new MiniCSSExtractPlugin({
              filename: '[name].css',
              chunkFilename: '[id].css'
          })
      ]
  }

• bro.js

  const bro = (greeting) => {
      return "---${greeting}, bro";
  }
  
  export {bro};

• index.js

  import {bro} from './bro';
  
  import './style/main.sass';
  console.log(bro(('Dude')));

• package.json

  {
    "name": "webpacktut",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack",
      "start:dev": "webpack-dev-server"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.6.0",
      "@babel/preset-env": "^7.6.0",
      "babel-loader": "^8.0.6",
      "css-loader": "^3.2.0",
      "file-loader": "^4.2.0",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "mini-css-extract-plugin": "^0.8.0",
      "node-sass": "^4.12.0",
      "sass-loader": "^8.0.0",
      "style-loader": "^1.0.0",
      "webpack": "^4.40.2",
      "webpack-cli": "^3.3.9",
      "webpack-dev-server": "^3.8.1"
    }
  }

• main.sass

  $bg: red
  
  body 
      background-color: $bg