标签: webpack-encore

我刚刚安装了Encore来测试它并开始在我的项目中使用它(非常棒的工作!!!真的,谢谢!).

我马上就遇到了问题.

尝试运行时,./node_modules/.bin/encore dev我收到异常:

无法确定webpack上下文.(您是从项目外的目录执行webpack吗？).尝试传递--context选项.

我只是按照官方文档中关于第一个示例的说明进行操作,结果是此异常.

我的项目结构如下:

my-app-root-folder
- app
- bin
- nome_modules
- src
- tests
- var
- vendor
- web
...
composer.json
composer.lock
webpack.config.js

所以,基本上,我有一个Symfony 3.3项目的经典结构,加上一些与之相关的文件夹JS.

任何人都可以帮我解决这个问题吗？

这是我第一次采用更复杂的解决方案来管理css和javascript资产.

Unitl现在我已经把所有这些文件放进去了src/AppBundle/Resources/public/所以我对这个新流程并不十分熟悉.

谢谢!

我按照文档使Webpack Encore在我的项目中工作.webpack.config.js中导入的js文件工作正常,但我在页面特定的js中遇到问题:$ is not defined.

Webpack.config.js:

const Encore = require('@symfony/webpack-encore');
var webpack = require('webpack');

Encore
.setOutputPath('public/build/')
.setPublicPath('http://localhost/tharmo/public/build')
.setManifestKeyPrefix('build/')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()

.createSharedEntry('vendor', [
    './assets/js/custom.js',
    'materialize-css',
])
.addEntry('app', './assets/js/app.js')
.addEntry('statistiques', './assets/js/statistiques.js')
.addPlugin(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}))

.enableSassLoader()
;

module.exports = Encore.getWebpackConfig();

base.html.twig:

<script src="{{ asset('build/manifest.js') }}"></script>
<script src="{{ asset('build/vendor.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/app.js') }}"></script>
<script>
    $(document).ready(function () {
        getNotifications(1);
    });
</script>

$(document).ready 不起作用.

我想在 Symfony 4 项目中使用 Webpack Encore，当我按照 Yarn https://yarnpkg.com/lang/en/docs/install/ 的安装指南进行操作时，我收到此错误消息：

# yarn install
yarn install v1.5.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
error @symfony/webpack-encore@0.17.1: The engine "node" is incompatible with this module.
Expected version ">=6.0.0". error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided
in "/var/www/html/jobeet/yarn-error.log".

我做了什么

我使用了这个 Docker 镜像：php:7.2-fpm

apt-get install apt-transport-https \
                gnupg -y --no-install-recommends

echo "alias nodejs=node" …

我正在尝试将 dropzone 集成到我的 Symfony 4.1 项目中，但我遇到了麻烦。

我通过 npm: 将 dropzone 添加到我的项目中npm install dropzone。

在assets/app.js 中，我需要 dropzone：

'use strict';

require('../css/app.css');

// create global $ and jQuery variables
import('jquery');

require('bootstrap');

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');
require('dropzone/dist/min/dropzone.min.js');

require('./main.js');  // assets/js/main.js

在main.js 中，我只是尝试添加该函数：

Dropzone.autoDiscover = false;

一旦我尝试为 dropzone 进行一些配置，我的浏览器控制台就会发疯：未定义 Dropzone。

我问自己这里有什么问题。

谢谢你的帮助！

我正在将Vue弹出到Symfony 4项目中，并且遵循了所有可以找到的规则。由于某些原因，我无法显示任何Vue组件-我什至无法从我的app.js文件夹执行console.log。

这是app.js：

var Vue = require('vue');
import App from './components/App'
console.log('testing')
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
});

这是webpack.config：

var Encore = require('@symfony/webpack-encore');

Encore //将存储已编译资产的目录.setOutputPath（'public / build /'）//网络服务器用于访问输出路径的公共路径.setPublicPath（'/ build'）//仅CDN或子目录所需目录部署//..setManifestKeyPrefix('build/'）

/*
 * ENTRY CONFIG
 *
 * Add 1 entry for each "page" of your app
 * (including one that's included on every page - e.g. "app")
 *
 * Each entry will result in one JavaScript file (e.g. app.js)
 * and one CSS file (e.g. app.css) if …

我正在学习使用webpack-encore并注意到它仅作为依赖项安装dev。这是否意味着我应该在开发时编译我的文件js并将css它们推送到存储库，然后推送到生产环境？

在我看来，这似乎是文档所暗示的内容，但这是否意味着合并冲突地狱？编译后的文件将无法合并。

这难道不违背版本控制理念吗？据我所知，您不会以编译语言（即 C/C++）发布二进制文件，而是推送代码并期望服务器编译它们。我知道这与 javascript 中的“编译”类型不同，但是在这种情况下生产服务器的预期行为是什么？接收准备好提供服务的文件，还是在发布时编译它们？

提前致谢

Symfony Encore 现在默认支持使用 TypeScript（添加对 enableTypescriptLoader 的支持），而且效果很好。但是，我想使用 tsconfig.json 文件配置我的 TypeScript 配置。

我试着弄清楚把它放在哪里，但我迷失在了兔子洞里，不知道应该把文件放在哪里，让 ts-loader 捡起它。或者，如果有启用此功能的配置。

使用Symfony 4和Webpack + Encore + Yarn,我想在我的模板中处理图像,而我真的不知道如何实现这一点.

我把我的图像放在我的/assets/img/logo.png文件夹中,并在我的文件夹中使用webpack.config.js:

.addEntry('logo', './assets/img/logo.png')

在我跑完之后:

yarn run encore dev

哪个生成/public/build/logo.js和/public/build/images/logo.aez323a.png文件.

我的问题是,有没有办法将Symfony asset()函数与文件名中的哈希链接到文件名？或者我应该使用其他方式在我的模板中使用图像？

该Symfony的的邮件文件说，人们可以很容易嵌入图像：

<img
    src="{{ email.image('@images/logo.png') }}"
    alt="Logo">

但是，我的所有资产都是由 Webpack 和 Encore 构建的。我也使用资产清单文件，因为每个资产的名称中都有一个 chunkhash。

在这种情况下如何使用 Twig 嵌入图像？我试过：

<img
    src="{{ email.image(asset('build/images/logo.png')) }}"
    alt="Logo">

但这不起作用。我最终得到一个“模板丢失”的异常。如果我使用来自静态位置的图像，这当然很有效。

当我从带有 VueJS 的基本 symfony 应用程序和 symfony 提供的 Webpack encore 包加载页面时出现以下错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

所以我需要将 VueJS 的别名更改为 webpack：

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

但是我没有在 Webpack Encore 中找到任何可以更改此设置的内容。

Webpack Encore：http ://symfony.com/doc/current/frontend.html