如何解决无法从浏览器404使用Twig访问Webpack开发服务器JS和CSS捆绑包
目标
在具有实时重新加载(而非HMR)功能的docker设置中使用webpack开发服务器。
问题
不提供CSS和JS捆绑包。在浏览器开发人员控制台中,CSS和JS(以及其他资产)同时出现404错误,并且仅显示纯HTML。
说明
我正在研究一个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 举报,一经查实,本站将立刻删除。