javascript - webpack 开发服务器正在监听扩展名为 PHP 的文件( "index.php")

Question

大家。

我使用默认配置，没有任何额外的包。

运行命令后，“npm run dev”已像浏览器中的页面一样打开文件 PHP，但文件已下载。

我如何设置配置，使开发服务器可以监听具有 PHP 扩展名的文件？

配置:

    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、图像...(除非您将其用作 Nodejs 应用程序中的中间件)

通常，您必须使用描述的代理选项here ，指向通常运行基于 php 的 Web 应用程序的 apache 或 nginx 服务器。

根据下面的评论进行编辑

首先，您应该为本地开发服务器使用 .test 域。请参阅this article 。您不能使用 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 的文档和文章(就像我刚接触 Webpack 时所做的那样)到它)。

Start here并浏览左侧的所有项目。 Guides将为您提供很多示例和configuration当您充分了解基础知识时将会很有用...