Сервер разработки веб-пакетов прослушивает файл с расширением PHP («index.php»)

Question

всем.

Я использую конфигурацию по умолчанию, без каких-либо дополнительных пакетов.

После выполнения команды "npm run dev" открыли файл PHP как страницу вбраузер, но файл загружен.

Как мне настроить config, чтобы dev-сервер мог прослушивать файл с расширением PHP?

Config:

    let path = require('path');

let conf = {
    entry: './panel/js/index.js',
    output: {
        path: path.join( __dirname, 'panel/js' ),
        publicPath: '/panel/',
        filename: 'bundle.js'
    },
    devServer: {
      index: '',
      open: true,
      overlay: {
        warnings: true,
        errors: true
      },
      host: 'test.io',
      proxy: {
        '**': {
          target: 'https://test.io',
          changeOrigin: true,
        }
      }
    }
};

module.exports = conf;

package.json:

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "login-js.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --mode development --open",
    "build": "webpack --mode production",
    "start": "cross-env NODE_ENV=development webpack-dev-server --inline"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^5.2.0",
    "path": "^0.12.7",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

Спасибо за помощь.

Answer 1

Webpack DevServer - это простой http-сервер, его назначение - обслуживать статические файлы, такие как html, css, js, images ... (если вы не используете его в качестве промежуточного программного обеспечения в приложении nodejs)

ОбычноВы должны использовать опцию proxy, описанную здесь , указывая на ваш apache или nginx сервер, на котором обычно работает ваше веб-приложение на основе php.

Редактировать на основена ваши комментарии ниже

Прежде всего вы должны использовать домен .test для локального сервера разработки.См. эту статью .Вы не можете использовать test.io, как сейчас в вашем коде (test.io - это существующий сайт в сети).Сначала сделайте веб-сайт, который вы разрабатываете, доступным на http://yoursitename.test или http://localhost, если вы используете только этот сайт.Для этого вам нужен веб-сервер типа apache или nginx.Webpack не будет обслуживать сайт php для вас, это не для этого ...

Вы также должны использовать лучшую структуру каталогов для файлов приложений.Вот пример для общего использования:

├── src
  ├── js
  └── css
└── public
  ├── build
  └── images

Тогда ваш webpack.config.js может выглядеть примерно так (с использованием приведенной выше структуры):

const path = require('path');
const devMode = process.env.NODE_ENV !== "production";

let conf = {
    mode: devMode ? "development" : "production",
    entry: {
        index: './src/js/index.js'
    },
    output: {
        path: path.join( __dirname, 'public/build' ),
        publicPath: '/build/',
        filename: '[name].js'
    },
    devServer: {
      index: '',
      open: true,
      overlay: {
        warnings: true,
        errors: true
      },
      host: 'yoursitename.test',
      proxy: {
        '**': {
          target: 'http://yoursitename.test',
          changeOrigin: true,
        }
      }
    }
};

module.exports = conf;

Изменения, необходимые для вашего package.json:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --progress",
  "build": "cross-env NODE_ENV=production webpack -p --progress",
  "start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open"
}

Как расширить свои знания

Я должен сказать вам, что эти вещи являются основами Webpack, и если вы все еще не можете сделать этоваше приложение работает, вы должны прочитать много документации и статей о Webpack (как я делал, когда я был новичком в этом).

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