标签: webpack-encore
无法在 Symfony 中使用 encore dev-server 获取 /
我想指出的是，我使用的是带有 Webpack 默认配置的经典 Symfony 应用程序。而且 watch 命令运行得非常好。
您好，当我尝试启动 Webpack Encore 开发服务器时，编译没有任何问题，但当我访问页面时，出现错误“Cannot GET /”。我在控制台中没有错误
（来源：casimages.com）
但有趣的是，http://localhost:8000/webpack-dev-server似乎有效。
（来源：casimages.com）
var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')ne CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js') …推荐指数
解决办法
查看次数
Symfony Webpack/Encore 处理未引用的源图像
我试图让 Webpack 处理和复制文件src夹中的所有图像文件，并build使用“image-webpack-loader”将它们输出到文件夹。
据我了解，Webpack 只会对 CSS/SASS/LESS 或入口点中引用的图像执行此操作。
我正在处理一个 Symfony 项目，并且在 twig 模板中有很多引用，这些引用显然被忽略了。
知道如何在不添加构建工具或为项目模板中包含的每个图像制作重复参考文件的情况下实现这一点吗？
推荐指数
解决办法
查看次数
无法从 Webpack 找到入口点文件：文件“.../public/build/entrypoints.json”不存在
我正在尝试设置一个从 github 克隆的 symfony 项目，我是设置 symfony 的新手，需要帮助。我已经完成了作曲家安装，但它不会显示网页。它说找不到入口点
我尝试过 Composer install、npm 以及其他，因为我是 symfony 的新手
它给我的代码有错误：
<head>
<meta charset="UTF-8">
<title>{% block title %}CargoFM{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>
这可能是一个非常小的问题
完整错误消息：模板渲染期间引发异常（“无法从 Webpack 找到入口点文件：文件“C:\larragon\www\cargofm/public/build/entrypoints.json”不存在。 ”）。
不知道该怎么办
推荐指数
解决办法
查看次数
如何使用 Webpack Encore 在 Heroku 上编译资产？
我在我的 Symfony heroku 应用程序中添加了一个 heroku/nodejs buildpack，并且我能够安装我的纱线依赖项。
但是我无法运行
$ yarn run encore production
Command "encore" not found无论我在 composer.json 中运行命令，我总是有同样的错误：
// composer.json
"compile": [
"node_modules/.bin/encore production",
[•••]
或在 package.json
//package.json
"scripts": {
"heroku-postbuild" : "yarn run encore production"
[•••]
推荐指数
解决办法
查看次数
Symfony 4.1 项目中的 Yarn 和 Webpack Encore 配置
介绍
我正在一个需要文件上传的项目上尝试Symfony 4.1++ 。为此，我选择使用前端。YarnWebpack EncoreOneUpUploaderBundleBlueimp jquery file upload
但是，与旧式的酷方法相比，需要添加大量的配置CSS并JavaScript
在需要的地方添加它们，但缺乏包管理的优势，这让其受到了一些困扰。
当然，使用包管理器轻松更新依赖项确实需要付出代价。但是，在初始配置构建编译之后，之后很容易或者应该很容易。
问题
我希望能够使用前面提到的库组合上传文件。我正在寻找正确的配置。
目前构建无法编译 - 我收到错误！
ERROR Failed to compile with 1 errors
This dependency was not found:
* jquery-ui/ui/widget in ./node_modules/blueimp-file-upload/js/jquery.fileupload.js
正如您从附加代码中看到的那样，我尝试为 提供别名jquery-ui/ui/widget，但它没有找到找到的包。
另外，Yarn 目录中没有包jquery-ui/ui/widget，但jquery.ui.widget我尝试要求但未成功。
代码
Webpack.config.js
var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
// directory where all compiled assets will be stored
.setOutputPath('public/build/')
// what's the public path to this …推荐指数
解决办法
查看次数
Symfony 4 & encore 自动刷新不起作用，我总是必须手动重新加载浏览器
从一个新的 Symfony 4 项目中，当我运行这个命令时：
./node_modules/.bin/encore dev-server --hot
然后我修改了一个 scss 文件（通过示例更改 body 标签背景颜色），shell 做出反应
但是我的浏览器不会自动刷新！我总是必须手动重新加载页面以查看最新的 css 更改。我可以在哪里做一个 mystake？
谢谢 ！
=> 我用不同的浏览器测试过 => 如果我修改自定义 javascript 文件，浏览器会自动刷新！相反，当我更改 scss 文件时
=> 我的资产目录结构：
=> 我的 webpack.config.js 内容：
var Encore = require('@symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for …推荐指数
解决办法
查看次数
为什么 babelConfig 在 webpack encore 中不起作用？
我想为我的项目添加对 async/await 函数的支持。
我安装
"@babel/core": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-stage-2": "^7.0.0",
"@babel/runtime": "^7.2.0",
这是我的webpack.config.js
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build')
.setPublicPath('/build')
.addEntry('app', './assets/app.js')
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableVueLoader()
.configureBabel(function(babelConfig) {
babelConfig.presets.push('@babel/preset-env');
babelConfig.presets.push('@babel/preset-stage-2');
babelConfig.plugins.push('@babel/plugin-transform-runtime');
})
;
const config = Encore.getWebpackConfig();
config.externals = {
mode: 'development',
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:80',
devServer: {
public: 'http://localhost:3000',
disableHostCheck: true,
},
})
};
config.node = {
fs: "empty"
};
module.exports = config;
当我运行服务器开发时，出现错误。
Module build failed (from ./node_modules/babel-loader/lib/index.js): …推荐指数
解决办法
查看次数
使用 WebPack Encore 和 Symfony 4 在 TWIG 页面上使用功能 Javascript
我使用的是 Symfony 4.2，我使用的是最后一个 WebPack Encore。
我有问题，因为我需要在我的树枝模板上使用我的 javascript 中的函数，但这永远行不通。
我总是有同样的问题：
未捕获的 ReferenceError：consoleText 未在 (index):17 处定义
资产/js/app.js：
require('../css/app.css');
const $ = require('jquery');
global.$ = global.jQuery = $;
资产/js/myFunctions.js
const consoleText = function (log = "Auncun log") {
console.log(log);
};
module.exports = {
consoleText: consoleText
};
webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
我需要在我的文件之外访问我的函数 consoleText()。
如果我想访问 javascript 文件，这个工作。示例：在我的 app.js 中，我可以添加：
let myTest = require('./myFunctions');
myTest.consoleText('Blablabla');
编译后可以正常工作。
但是我需要在我的树枝模板（home.html.twig）上访问这个功能
在我的 base.html.twig 中，我使用以下命令调用了我的脚本文件：
{% …推荐指数
解决办法
查看次数
如何在 webpack 中将 'src' 设置为资源根目录？
我有一个 React 应用程序，带有自定义 webpack 配置（webpack-encore）。
如何将“src”文件夹设置为资源根目录。
前任：
我想用
import 'components/someComponent.jsx'
代替
import '../../components/someComponent.jsx'
文件夹结构：
- -应用程序
- --src
- - -成分
推荐指数
解决办法
查看次数
从源代码 Webpack Encore 构建的 Ckeditor 未正确显示
我正在尝试使用 Webpack Encore 从源代码 Ckeditor 5 构建。我按照这里的说明进行操作：
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#bundler
但我对该工具的显示有问题。它看起来像这样很奇怪（首先，当我使用 Ckeditor 的内置功能时，它工作正常）：
我认为这个问题与 CSS 有关，但我不知道出了什么问题。我的 Webpack 编译正常，控制台是空的。我的 package.json 如下所示：
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/helper-call-delegate": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0",
"@symfony/webpack-encore": "^0.29.1",
"babel-loader": "^8.1.0",
"bootstrap": "^4.4.1",
"core-js": "^3.0.0",
"jquery": "^3.5.1",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.2",
"sass-loader": "7.0.1",
"webpack-notifier": "^1.6.0",
"@ckeditor/ckeditor5-dev-utils": "^13.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
"raw-loader": "^3.1.0",
"postcss-loader": "^3.0.0"
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
"@ckeditor/ckeditor5-autoformat": "^19.0.0",
"@ckeditor/ckeditor5-easy-image": "^19.0.0",
"@ckeditor/ckeditor5-alignment": "^19.0.0",
"@ckeditor/ckeditor5-autosave": "^19.0.0",
"@ckeditor/ckeditor5-basic-styles": "^19.0.0",
"@ckeditor/ckeditor5-block-quote": "^19.0.0",
"@ckeditor/ckeditor5-core": "^19.0.0",
"@ckeditor/ckeditor5-editor-classic": "^19.0.0",
"@ckeditor/ckeditor5-essentials": "^19.0.0", …推荐指数
解决办法
查看次数