Рубрики
Без рубрики

WebPack: часть-3

В предыдущем блоге мы обсудили на разряжении кэша и плагинах, расщепляя Dev и Production. В т … с меткой WebPack, JavaScript, начинающими, WebDev.

В Предыдущий блог Мы обсудили на Cache Busting и плагины, расщепляя Dev и Production.

В этом блоге мы изучим интересную часть WebPack здесь, как:

  1. HTML-погрузчик
  2. Файловой погрузчик
  3. Clean-WebPack
  4. Несколько enterpoints & vendor.js
  5. Экстракт CSS & Minify HTML/CSS/JS

HTML-загрузчик:

Для изображений, когда мы используем одинаковую структуру файла IMG для Dev и Prod. Мы получим проблему, поскольку изображения не загружаются в продукцию. Чтобы исправить, что нам нужно HTML-загрузчик.

Установить HTML-погрузчик :

$ npm install —save-dev html-loader

webpack.config.js:

// include in module rules

{
  test: /\.html$/,
  use: ["html-loader"] 
}

Когда мы бежим NPM запустить продукт , Мы получаем ошибку как:

Неожиданный токен, вам может понадобиться подходящий загрузчик для обработки этого типа файла.

Теперь, здесь нам нужно файловой погрузчик.

Файловой погрузчик:

Чтобы установить Файловый загрузчик .:

$ npm install –save-dev file-loader

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
     ]},
   {
     test: /\.html$/,
     use: ["html-loader"] 
   },   
   {
      test: /\.(svg|png|jpg|gif)$/,
      use: { 
        loader: "file-loader",
        options: { 
        name: "[name].[hash].[ext]",
        outputPath: "images" 
      }
   }}
 }}

Сейчас беги NPM запустить продукт С

Это создаст Изображения как Папка Внутренний расчет и все файлы jpg/png/svg будут скопированы там.

Clean-WebPack:

Всякий раз, когда мы выполняем некоторые изменения в файле, это создаст новый хеш-файл. Мы установим Clean-WebPack Плагин, который будет удалять Dist Directory каждый раз, когда мы строим.

$ npm install –save-dev clean-webpack-plugin

Используйте его в производственном файле, для Dev его не нужно.

webpack.prod.js:

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack-config');
const merge = require('webpack-merge');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = 
  merge(common, { 
    mode : "production",
    output: 
      { 
         filename: "hello.[contentHash].js", 
         path.resolve(__dirname, "New_folder_name") } }
      },
    plugins: [ new CleanWebpackPlugin() ]
})

Несколько enterpoints & vendor.js:

Если мы хотим иметь несколько точек входа, то мы можем сделать это с ниже следующих шагов:

Создайте файл в SRC папка.

Пример: Vendor.js.

Изменить выходной раздел в оба dev и prod.js:

webpack.dev.js:

output: {
    filename: "[name].bundle.js"
}

webpack.prod.js:

output: {
    filename: "[name].[constentHash].bundle.js"
}

webpack.config.js:

module.exports = {
  entry: {
     main: "./src/index.js",
     vendor: "./src/vendor.js"
  }
}

Теперь проверьте бегом NPM Start. и NPM запустить продукт Отказ   Это создаст два имени файла как main.bundle.js и Vendor.Bundle.js Отказ

Экстракт CSS и Minify HTML/CSS/JS:

Экстракт CSS:

Это будет здорово, что мы можем иметь отдельный файл JS и CSS-файл в производстве. В настоящее время все происходит только на JS. В производстве, очевидно, нам нужно загрузить CSS. Как JS может занять секунду для загрузки. Это может быть выполнено, используя плагин, называемый мини-CSS-экстрактом-плагином.

Установить Мини-CSS-экстракт-плагин

$ npm install —save-dev mini-css-extract-plugin

webpack.prod.js:

// Add into the plugins:

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
plugins: [ 
    new MiniCssExtractPlugin({
        filename: "[name].[chunkHash].css"
    })
    new CleanWebpackPlugin()
],

Мы должны убедиться, что мы используем над фрагментом вместо стилей погрузчика в WebPack.config.js

webpack.dev.js:

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack-config');
const merge = require('webpack-merge');

module.exports = 
 merge(common ,{ 
    mode : "development",
    output: 
      { 
         filename: "[name].bundle.js",
         path.resolve(__dirname, "New_folder_name") } }
      },
    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
   ]}
  }
})

webpack.prod.js:

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack-config');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = 
  merge(common, { 
    mode : "production",
    output: 
      { 
         filename: "[name].[constentHash].bundle.js",
         path.resolve(__dirname, "New_folder_name") } }
      },
    plugins: [ 
       new MiniCssExtractPlugin({
         filename: "[name].[chunkHash].css"
       })
       new CleanWebpackPlugin() 
    ],
    module: 
       { 
         rules: [ 
           { 
             // files which ends with .css use the below loader 
             test: /\.scss$/,
             use: [
               "MiniCssExtractPlugin.loader", // 3rd. Move CSS into files
               "css-loader", // 2nd. CSS loader turns css into common JS
               "sass-loader" //1st. SASS loader which turns sass into CSS
             ]
           }
     }
})

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: [ 
       { 
         test: /\.html$/,
         use: ["html-loader"] 
       },   
       {
     test: /\.(svg|png|jpg|gif)$/,
     use: { 
           loader: "file-loader",
           options: { 
             name: "[name].[hash].[ext]",
             outputPath: "images"
           }
         }
        }
     }
}

Теперь, бегая NPM запустить продукт, Мы также получим файл CSS в папке Dist.

Минифицируйте CSS:

Чтобы министерзировать CSS, мы использовали плагин под названием Оптимизация-CSS-Assets-WebPack-Plugin

Установите это:

$ NPM Установка -Save-dev Optimize-CSS-Assets-Webpack-Plugin

( Нам просто нужно министерзировать CSS в производстве )

webpack.prod.js:

// (To compile CSS)
const OptimizeCssAssestsPlugin = require('optimize-css-assets-webpack-plugin');
// we add new property here called optimization
optimization: {
    minimizer: new OptimizeCssAssestsPlugin()
}

По умолчанию JS будет оптимизирован, но когда мы запускаем NPM запустить продукт Здесь CSS будет оптимизировать, а JS не будет оптимизирован дольше. Это потому, что мы перезаписываем оптимизацию выше.

Чтобы исправить, что мы должны добавить оптимизацию для JS.

Minify JS:

Для JS Минификатор Мы используем TerserPlugin , который установил по умолчанию.

Ввести это в webpack.prod.js:

const TerserPlugin = require('terser-webpack-plugin');
optimization: {
    minimizer: [new OptimizeCssAssestsPlugin(), newTerserPlugin()]
}

Minify HTML:

Мы не собираемся использовать какой-либо новый плагин здесь.

webpack.config.js:

Удалите HTMLWebpackPlugin с плагинов.

webpack.dev.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
// add plugins here as:

plugins: [
    new HtmlWebpackPlugin ({template: "./src/template.html"})
]

webpack.prod.js:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack-config');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = 
  merge(common, { 
    mode : "production",
    output: 
      { 
         filename: "[name].[constentHash].bundle.js",
         path.resolve(__dirname, "New_folder_name") } }
      },
      optimization: {
        minimizer: [new OptimizeCssAssestsPlugin(), newTerserPlugin(),
         new HtmlWebpackPlugin ({
           template: "./src/template.html",
           minify: {
             removeAtrributeQuotes: true,
             collapseWhiteSpace: true,
             removeComments: true
           }
        })
       ]
     },
      plugins: [ 
       new MiniCssExtractPlugin({
        filename: "[name].[chunkHash].css"
       }),
       new CleanWebpackPlugin() 
     ],
     module: 
       { 
         rules: [ 
           { 
           // files which ends with .css use the below loader 
           test: /\.scss$/,
           use: [
             "MiniCssExtractPlugin.loader", // 3rd. Move CSS into files
             "css-loader", // 2nd. CSS loader turns css into common JS
             "sass-loader" //1st. SASS loader which turns sass into CSS
         ]}
     }
})

Теперь запустите NPM запустить продукт И мы можем видеть в Dist index.html У нас нет комментариев и белых пробелов. Код будет расти.

Я надеюсь, что вы нашли этот блог полезным ♥ ️, если у вас есть какие-либо вопросы, пожалуйста, обратитесь к мне на @suprabhasupi 😋

🌟 Twitter 👩 🏻💻 suprabha.me. 🌟 Instagram.

Оригинал: “https://dev.to/suprabhasupi/webpack-part-3-1k9l”

Читайте ещё по теме: