无法从浏览器404使用Twig访问Webpack开发服务器JS和CSS捆绑包

编程问答 2022-07-22

问题描述

目标

在具有实时重新加载（而非HMR）功能的docker设置中使用webpack开发服务器。

问题

不提供CSS和JS捆绑包。在浏览器开发人员控制台中，CSS和JS（以及其他资产）同时出现404错误，并且仅显示纯HTML。

Screenshot developer console

说明

我正在研究一个dockerized PHP项目。有一个通过网络连接的Nginx，mariadb和PHP容器。将项目文件安装到PHP容器中，并在Nginx容器上打开了端口80和443。为澄清起见，docker-compose.yaml中的相关代码段：

version: '3.8'

services:
  Nginx:
    container_name: ${COMPOSE_PROJECT_NAME}_${APP_ENVIRONMENT}_Nginx
    build: Nginx
    ports:
      - "80:80"
      - "443:443"
      - "8080:443"
    volumes:
      - volume-data:/var/www/${APP_DOMAIN}/current
      - ./Nginx/templates:/etc/Nginx/templates
    environment:
      Nginx_HOST: "${APP_DOMAIN}"
    healthcheck:
      test: "curl -f -k -s https://localhost/healthcheck || exit 1"
      interval: 15s
      timeout: 3s
    working_dir: /etc/Nginx
    restart: always
    networks:
      - backend_net

  PHP:
    container_name: ${COMPOSE_PROJECT_NAME}_${APP_ENVIRONMENT}_PHP
    build:
      context: ./PHP
      target: PHP
    volumes:
      - volume-data:/var/www/${APP_DOMAIN}/current
    env_file:
      - sendgrid_api_key.env
      - session_symmetric_key.env
      - mariadb.env
    environment:
      HOST_PATH_TO_PROJECT: "${PWD}/.."
      APP_ENVIRONMENT: "${APP_ENVIRONMENT}"
    healthcheck:
      test: "curl -f -k -s https://Nginx/ping || exit 1"
      interval: 15s
      timeout: 3s
    working_dir: /var/www/${APP_DOMAIN}/current
    restart: always
    networks:
      - backend_net

{...}


volumes:
  volume-mariadb:
  volume-data:
    driver: local
    driver_opts:
      type: none
      o: bind
      device: $PWD/..

networks:
  backend_net:
    driver: bridge

在webpack配置内部，我正在合并Webpack配置，具体取决于production或development模式。

const {merge} = require('webpack-merge');

//depending on the command here common configs get merged with prod or dev configs

const commonConfig = require('./webpack.common');

module.exports = ({env}) => {
    const envConfig = require(`./webpack.${env}.js`);

    return merge(commonConfig,envConfig);
};

在package.json中，我定义了--env.env=dev，因此它将公共配置与dev配置合并。启动webpack开发服务器的整个脚本如下所示：

"test": "webpack-dev-server --config frontend/build-utils/webpack.config.js --mode development --env.env=dev --watch"

常见的webpack.config如下所示：

const path = require('path');
const copyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    entry: {
        scripts: './frontend/index.js',vendor: './frontend/vendor.js',},target: 'web',output: {
        path: path.resolve('public/assets'),filename: "[name].bundle.js",libraryTarget: 'umd',globalObject: 'this',// umdNamedDefine: true,library: '[name]'
    },module: {
        rules: [
            {
                // Apply rule for .sass,.scss or .css files
                test: /\.(sa|sc|c)ss$/,use: [
                    MiniCssExtractPlugin.loader,{
                        // This loader resolves url() and @imports inside CSS
                        loader: "css-loader",options: {
                            url: false,sourceMap: true,}

                    },{
                        loader: 'resolve-url-loader',{
                        // transform SASS to standard CSS
                        loader: "sass-loader",options: {
                            implementation: require("sass"),}
                    },]
            },{
                test: /\.(js)$/,exclude: /node_modules/,use: ['babel-loader']
            },]
    },resolve: {
        extensions: ['*','.js']
    },plugins: [
        new copyWebpackPlugin({
                patterns: [
                    {
                        from: 'frontend/images/',to: 'images/'
                    }              
            
                ],),new MiniCssExtractPlugin({
            filename: 'styles.css',}),]
};

还有webpack dev config：

const path = require('path');

module.exports = {
    mode: 'development',devtool: 'eval',devServer: {
        publicPath: path.resolve('public/assets'),contentBase: path.resolve('public'),// port: 3000,host: '0.0.0.0',https: true,watchOptions: {
            ignored: /node_modules/,aggregateTimeout: 500,// delay before reloading
            poll: 1000 // enable polling since fsevents are not supported in docker
        },};

项目的文件夹结构：

root/
 ├── frontend
 ...
 ├── public/
      ├── index.PHP 
      └──  assets/
           ├── style.bundle.css
           ├── scripts.bundle.js
           └── images/
 ├── src
     └── Layout/
          └── Templates/
              └── page-layout.twig

最后是我如何在树枝模板中调用资产的示例：

<link rel="stylesheet" href="/assets/styles.css">

在webpack dev config中，我尝试将contentBase的路径设置为index.PHP，也将其设置为从PHP使用的树枝模板的路径。但是CSS和JS仍然缺失。还尝试了不使用path.resolve的情况。

当我在没有开发服务器的情况下使用"dev": "webpack --config frontend/build-utils/webpack.config.js --env.env=dev"运行webpack时，资产将被正确捆绑和复制，并且我可以访问它们。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dockerdockernginxwebpackwebpackwebpackwebpack-dev-server