使用 PHP 的 Webpack 配置 html-webpack-plugin

Question

在我的 webpack 结构中，我使用 html-webpack-plugin 来生成我的 html 文件等，问题是我想在页面上制作一些东西，在这种情况下我想使用 PHP。我怎样才能让它正常工作？我在互联网上查找，但找不到任何东西。

这是我的 webpack.dev.js

const path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    MiniCssExtractPlugin = require('mini-css-extract-plugin');

const {
    distPath,
    srcPath
} = require('./webpack.config.paths');

const {
    selectedPreprocessor
} = require('./webpack.config.preprocessor');

module.exports = {
    entry: {
        main: './' + srcPath + '/js/index.js'
    },
    output: {
        path: path.resolve(__dirname, distPath),
        filename: '[name].[chunkhash].js'
    },
    devServer: {
        open: true,
    },
    module: {
        rules: [
            {
                test: selectedPreprocessor.fileRegexp,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: selectedPreprocessor.loaderName,
                        options: {
                            sourceMap: true
                        }
                    },
                ]
            },
            {
                test: /app.*\.html$/,
                loader: 'raw'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'scss/index.css',
        }),
        new HtmlWebpackPlugin({
            hash: false,
            //inject: "head",
            template: './' + srcPath + '/content/index.html',
            filename: 'index.html',
            myPageHeader: 'Hello World',
        }),
    ]
};

Answer 1

这更像是一条评论，而不是一个答案，但我缺乏评论的声誉。你的问题需要澄清你所追求的目标到底是什么——你想使用 webpack 生成 PHP 页面还是想在 webpack 开发服务器下使用 PHP。

第一个案例是我的典型用例 - 我使用 webpack 生成 PHP 页面，该页面将部署到共享主机上。另外，我使用 Pug 模板引擎 - 让 Pug 和 PHP 成为朋友相当复杂，但 Pug 非常适合我的共同目的。为了编译，我使用HtmlWebpackPlugin.

例子：

webpack.config.js（仅关键部分，认为您已经安装并导入了依赖项）

module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          { loader: 'pug-loader' }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: `./test.pug`,
      filename: `test.php`,
      foo: 'bar'
    })
  ]
}

test.pug在 Pug 中，您将把 PHP 作为插值或纯文本插入（如文档中“插值”和“纯文本”部分所述）。

- var { foo } = htmlWebpackPlugin.options
section.my-section
  .                                      // <- Plain Text Insertion
    <?php
    $sample_class = "sample-class";
    $foo = "!{foo}";                     // <- Interpolation
    ?>
  p.default-class(class!='<?php echo $sample_class; ?>')   // <- Here default class of <p> placed right after dot, and PHP class variable placed as an unsafe argument
    .
      <?php echo $foo; ?>

然后 webpack 给我输出如下：

test.php

<section class="my-section">

  <?php
  $sample_class = "sample-class";
  $foo = "bar";                       
  ?>

  <p class="default-class <?php echo $sample_class; ?>"><?php echo $foo; ?></p>

</section>

如果这就是您想要的，那么它就有效。

第二种情况是不可能的 - 在这种情况下，您可能希望对 webpacked 页面使用 devserver，并（例如）对 PHP 页面使用 XAMPP 服务器，并且这两个服务器必须侦听不同的端口（http://localhost:8080对于 WDS 和/http://localhost:80或仅http://localhost用于 XAMPP ）。