Блог

Главная - Вопросы по программированию - Не удается опубликовать приложение на страницах github с помощью webpack, почему?

Не удается опубликовать приложение на страницах github с помощью webpack, почему?

#javascript #webpack #github-pages

Вопрос:

Я создаю простое приложение, используя Tailwindcss, JavaScript и Webpack, и пытаюсь опубликовать его на страницах Github.

Хотя запуск приложения через локальный хост работает нормально, я сталкиваюсь с проблемой при попытке опубликовать приложение через gh-страницы. Я получаю сообщение об ошибке «Файл 404 не найден», почему это? Есть ли какие-либо зависимости, отсутствующие в webpack.config.js или файл package-json?

Любая помощь будет признательна.

Пожалуйста, также смотрите репозиторий github: https://github.com/e-d-i/shoppingCart

пакет.json

   "name": "shopping-cart",
  "version": "1.0.0",
  "description": "A simple shopping cart using HTML, CSS / Tailwind CSS, JavaScript amp; Webpack",
  "main": "webpack.config.js",
  "dependencies": {
    "css-loader": "^6.3.0",
    "gh-pages": "^3.2.3",
    "mini-css-extract-plugin": "^2.3.0",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.1.1",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.56.1",
    "webpack-cli": "^4.8.0"
  },
  "homepage": "https://e-d-i.github.io/shoppingCart/",
  "devDependencies": {},
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "deploy": "gh-pages -d build"
  },
  "keywords": [],
  "author": "e-d-i",
  "license": "ISC"
}```


**postcss.config.js**

```const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
    tailwindcss
  ],
};```


**webpack.config.js**

```const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: "development",
  entry: "./src/script.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname,"./build")
  },
  plugins: [new MiniCssExtractPlugin({
      filename: "styles.css",
  })],
  module: {
    rules: [
        {
          test:/.css$/,
          use:[
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader"
        ]
        }
    ]
  }
}```

Комментарии:

1. Я добавил index.html файл вместе с двумя другими html-файлами в папке сборки, в результате чего сообщение об ошибке 404 больше не будет получено. Вместо этого стили Tailwindcss и код JavaScript почему-то не будут применяться…

2. В конце концов я перестроил веб-приложение с помощью Parcel, и теперь оно наконец работает…

Ответ №1:

Вы должны добавить «предварительное развертывание» в свой пакет.json примерно так:

 "predeploy": "npm run build"

и запустите его локально перед развертыванием на страницах github.

источник: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

Метки: ,