В предыдущем блоге мы обсудили концепции установки и загрузчиков веб-пакетов.

В этом блоге мы будем обсуждать:

  1. Очистка кеша и плагины
  2. Разделение разработки и производства

Очистка кеша и плагины:

Очистка кеша - это то, как мы можем предотвратить определенные ресурсы, такие как основной пакет js или пакет css, после того, как мы создадим отдельный пакет CSS.

Всякий раз, когда мы вносим какие-либо изменения в код, он должен генерировать новый хеш, иначе хеш должен быть одинаковым каждый раз, даже при обновлении страницы. Таким образом, это означает, что URL-адрес кэшируется, если в коде не будет изменений.

webpack.config.js:

const path = require("path")
module.exports = 
  { 
    entry: "./src/index.js",
    output: 
      { 
         // the first thing we can configure is file name
         filename: "vendor.[contentHash].js",
         // contentHash Will generate hash
         // where to do , where to actually split the code 
         // Import path from module which comes with node called path 
         // path.resolve(__dirname,..) : It mainly resolve absolute path to the New_folder_name   directory. Wherever the current directory is. e.x. in my lappy: /Users/Projects/ Work/webpack-work // "dist" name of the folder where we want to code be going path: path.resolve(__dirname, "New_folder_name") } }
      }
}

В моем предыдущем блоге (webpack: часть 1) нас сохранили dist/main.js в файле index.html.

Но когда мы генерируем файл через хеш, нам не нужно включать скрипт в index.html. Это можно сделать с помощью плагинов.

Плагины:

Плагины используются для настройки процесса сборки веб-пакетов различными способами.

Мы поговорим о HTMLWebpackPlugin:

HtmlWebpackPlugin упрощает создание файлов HTML для обслуживания пакетов веб-пакетов. Это особенно полезно для пакетов веб-пакетов, которые включают в себя хэш в имени файла, который изменяет каждую компиляцию. Вы можете позволить плагину сгенерировать для вас HTML-файл, предоставить свой собственный шаблон, используя шаблоны lodash, или использовать свой собственный загрузчик.

Установите HTMLWebpackPlugin.

$ npm install —save-dev html-webpack-plugin

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
// then we can add plugins in module: 
plugins: [new HtmlWebpackPlugin()],

Теперь при выполнении npm start, который создаст index.html внутри папки dist, куда будет включен скрипт. автоматически.

Но на странице не будет контента. Как и раньше, мы брали еще один index.html, а теперь его файл dist / index.html, в который был добавлен только скрипт, а не HTML-контент.

Создайте новый html-файл в папке src как main.html.

И скопируйте код предыдущего файла index.html в main.html. Тег удаления скрипта был ранее взят из веб-пакета.

Удалять:

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

Теперь нам нужно указать плагину использовать созданный нами шаблон. (main.html)

webpack.config.js:

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = 
  { 
    mode : "development"
    entry: "./src/index.js",
    output: 
      { 
         filename: "hello.js", 
         path.resolve(__dirname, "New_folder_name") } }
      },
    plugins: [
      new HtmlWebpackPlugin({ 
template: "./src/main.html"
       })
    ],
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.scss$/,
   use: [
"style-loader", // 3rd. style loader inject styles into DOM
"css-loader", // 2nd. CSS loader turns css into common JS
"sass-loader" //1st. SASS loader which turns sass into CSS
}
         ]
     }
}

Теперь выполните npm start, мы увидим dist / index.html, где будет шаблон из main.html.

Разделение DEV и производства:

Мы можем создать два файла в корневом каталоге: webpack.dev.js и webpack.prod.js

И скопируйте код webpack.config.js в оба файла.

Теперь я создам один общий файл конфигурации для веб-пакета, который называется webpack.config.js.

Позже нам нужно объединить webpack.dev.js с webpack.config.js и webpack.prod.js с webpack.config.js

Для слияния файла установите плагин под названием webpack-merge.

$ npm install - save-dev webpack-merge

webpack.dev.js:

const path = require("path")
const common = require('./webpack-config');
const merge = require('webpack-merge');
module.exports = 
 merge(common ,{ 
    mode : "development"
    output: 
      { 
         filename: "hello.js", 
         path.resolve(__dirname, "New_folder_name") } }
      }
})

webpack.prod.js:

const path = require("path")
const common = require('./webpack-config');
const merge = require('webpack-merge');
module.exports = 
  merge(common, { 
    mode : "production"
    output: 
      { 
         filename: "hello.[contentHash].js", 
         path.resolve(__dirname, "New_folder_name") } }
      }
})

webpack.config.js:

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = 
  { 
    entry: "./src/index.js",
    plugins: [
      new HtmlWebpackPlugin({ 
template: "./src/main.html"
       })
    ],
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.scss$/,
   use: [
     "style-loader", // 3rd. style loader inject styles into DOM
     "css-loader", // 2nd. CSS loader turns css into common JS
     "sass-loader" //1st. SASS loader which turns sass into CSS
       ]
     }}
  }

Теперь мы можем изменить package.json в соответствии с dev и prod:

package.json:

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

Проверьте команду, запустив npm start для dev и npm run prod для производства.

В настоящее время, когда мы вносим изменения каждый раз, нам нужно запускать npm start для сборки dev. Мы можем исправить это, установив сервер webpack dev.

Установите webpack-dev-server:

$ npm install - save-dev webpack-dev-server

В package.json:

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

- open откроет нам браузер в окне. Работает как живой сервер. Вы можете изменить код, и сервер веб-пакетов автоматически перестроит и обновит браузер для нас.

Надеюсь, этот блог был вам полезен. Если у вас возникнут вопросы, напишите мне на @suprabhasupi 😋

🌟 Twitter | 👩🏻‍💻 suprabha.me