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作为插值或纯文本格式（如docs中“插值”和“纯文本”部分中所述）。

- 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（对于XAMPP）。

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

1 个答案: