Работа с Webpack на готовом лендинге

228
03 мая 2022, 05:10

Есть свёрстанный адаптивный лендинг со стилями, скриптами, шрифтами и т.д. Недавно начал осваивать вебпак, настроил его конфиг, подключил все необходимые плагины/модули. Собирается без ошибок. Пример package.json и webpack.config.js:

const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
if (!devMode) {
  plugins.push(new MiniCssExtractPlugin());
}
module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8008,
    },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
    // new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      title: 'webpack Boilerplate',
      template: path.resolve(__dirname, './src/template.html'), // шаблон
      filename: 'index.html',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch",
    "build": "webpack",
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

Вопрос: html-webpack-plugin создаёт шаблон страницы, а как мне начать работу со своим документом? Куда закинуть готовый index.html?:) Благодарю за ответы.

READ ALSO
React проблемы с отображением подписчиков + Pagination

React проблемы с отображением подписчиков + Pagination

Я использую api и получаю пользователей, затем отображаю пользователей на странице (GitHub), все работает нормально, я хочу на странице профиля...

140
связь процесса node js и electron js

связь процесса node js и electron js

У меня есть дискорд-бот на discordjs, и приложение на electron

323
Отфильтровать без изменения создания нового массива

Отфильтровать без изменения создания нового массива

Подскажите пожалуйста каким образом можно отфильтровать массив без возвращения нового массиваПри использования filter или new Set возращается...

129
Обход XSS санитизации

Обход XSS санитизации

Надеюсь кто-нибудь сможет выручить

178