标签: webpack-encore

我想将Font Awesome 5添加到我的Symfony 4项目中,这就是我所做的:

• 我使用yarn为我的项目添加了字体真棒: yarn add --dev @fortawesome/fontawesome-free
• 我在我的主scss文件(assets/css/app.scss)中导入了很棒的字体: @import '~@fortawesome/fontawesome-free/scss/fontawesome';
• 我的webpack加装配置包括我的scss和js文件: .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss')
• 我编译: ./node_modules/.bin/encore dev

一切似乎都没问题,但是当我尝试在我的视图中使用字体真棒时,我只会得到一个方形图标.生成的app.css文件似乎没问题,因为我可以看到字体很棒的图标定义,例如:

.fa-sign-out-alt:before {
    content: "\F2F5";
}

似乎缺少'内容'部分,我想是因为没有加载字体...我是否需要添加一些内容来加载webfonts？我试图在我的app.js资产文件中添加字体awesome js,但它不会改变任何东西.我还尝试在我的webpack加装配置中添加自定义加载器(如https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2)我也尝试清除缓存,结果相同......

任何的想法？

我正在构建一个应用程序,Symfony 4我想遵循Web资产的最佳实践.我使用Encore/Webpack for SCSS和JS,它运行良好; 生成的JS + CSS很好地存储在/ public/build文件夹中.我坚持如何存储和使用静态资产,如图像,电影,声音.

图像应该存储在"公共/图像"文件夹还是"资产/图像"中？

还有一些后续问题:

如果存储图像public/images,如果我通过asset('...')电话污染模板,我会获得任何好处吗？

如果图像存储在assets/images,则:

• 他们是如何public/images通过http服务的？./bin/console assets:install什么也没做,说:'[OK]没有资产是由任何捆绑提供的..
• 我如何在SCSS中使用它们？通过相对路径？

问候,

我使用npm安装了webpack(Symfony encore),如下所示:

sudo npm install -g @symfony/webpack-encore --save-dev

我跑了这个 /var/www/project

在处理Windows主机/ Linux客户机时,由于包管理器和共享文件夹的问题,我被要求全局安装.

我不能将webpack(node_modules)安装在同一目录(或它下面)中 /var/www/project

所以我的package.json文件如下所示:

{
  "name": "test",
    "version": "1.0.0",
  "description": "This is a test",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "@symfony/webpack-encore": "^0.15.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex",
    "license": "MIT"
}

我/var/www/project使用这个运行再见

/usr/local/bin/encore dev

我得到了这个可爱的输出作为回报:

Running webpack ...

  TypeError: Cannot read property 'match' of undefined

  - index.js:125 parse
    [lib]/[webpack-encore]/[yargs-parser]/index.js:125:12

  - index.js:761 Function.Parser.detailed
    [lib]/[webpack-encore]/[yargs-parser]/index.js:761:10

  - yargs.js:938 Object.Yargs.self._parseArgs
    [lib]/[webpack-encore]/[yargs]/yargs.js:938:27

  - …

我正在尝试重新配置我的Symfony 3项目以使用webpack安可而不是正常的asstets.我有点困惑.

对于应用程序的一部分,我开发了一些继承自Kube的JS插件(CSS和JS框架,我没有注意到).这是一个例子:

(function (Kube) {
Kube.Assignment = function (element, options) {

    this.namespace = 'assignment';
    this.defaults = {
        //...
    };

    Kube.apply(this, arguments);

    this.start();
};

Kube.Assignment.prototype = {

    start: function () {
        //...
    }
};

Kube.Assignment.inherits(Kube.Distribution);

Kube.Plugin.create('Assignment');
Kube.Plugin.autoload('Assignment');

}(Kube));

不幸的是,Kube不被认可.

模块'imperavi-kube'通过纱线安装并通过进口

let Kube = require('imperavi-kube');

我收到以下错误: TypeError: Kube.Assignment.inherits is not a function

可能这不是Kube框架的问题,而是关于使用webpack处理JS插件的问题.

在Kube模块内部有一个用原型定义的"Kube"类.Prototype以.结尾window.Kube = Kube;

我想使用新版本的Webpack安可来访问它提供的所有新功能.然而,按照官方指南中的步骤,我无法使它工作,我得到Unknown "encore_entry_link_tags" function

我做了什么:

1. 更新我的php版本以匹配Webpack安可包的请求(> 7.1.9)
2. 跑 composer require symfony/webpack-encore-bundle
3. 在package.json 0.21.0上更新安可的版本
4. 跑 npm install --save-dev
5. 清除缓存

我不确定为什么这不起作用.任何建议将不胜感激.

我想使用一些片段：

import {gql} from "apollo-boost";
import "../fragments/cardFragments.graphql"

export const ADD_CARD = gql`
    mutation AddCard {
        createCard(input: {
            private: true,
            section: "school",
            createdBy: "api/users/1"
        }) {
            card {
                ...CardFields
            }
        }
    }
`;

export default {ADD_CARD}

卡片段.graphql：

fragment CardFields on card {
    id
    private
    section
    createdBy {
        id
    }
}

在控制台内我收到错误：

[GraphQL 错误]：消息：未知片段“CardFields”。，位置：[对象对象]，路径：未定义

我是不是忘记了什么？

编辑：

为了让 graphql 片段工作，我需要使用 webpack 加载它：Apollo 文档

我用以下方法做到了这一点Webpack Encore：

.addLoader({
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader',
});

module.exports = Encore.getWebpackConfig();

在我这样做之前 - 我收到了一个关于 .graphql …

对于相当大的 Web 应用程序，我想在同一页面上运行 Webpack (Encore) 的多个实例。当我将所有源代码放入单个 Webpack 配置中时，一切都会正常工作。但是，当我有两个具有相同源代码的不同配置时，我总是会收到如下错误：

lib.84f46ab6.js:19 Uncaught TypeError: __webpack_require__.n is not a function\n    at Object../assets/js/lib.js (lib.84f46ab6.js:19)\n    at __webpack_require__ (bootstrap:19)\n    at __webpack_exec__ (codemirror.css?f2af:1)\n    at codemirror.css?f2af:1\n    at Function.__webpack_require__.O (chunk loaded:25)\n    at codemirror.css?f2af:1\n    at webpackJsonpCallback (jsonp chunk loading:36)\n    at Array.forEach (<anonymous>)\n    at jsonp chunk loading:49\n    at runtime.7c0b88c9.js:146\n

经过一番研究后，我在这里找到了一篇关于该问题的文章：https ://medium.com/@cliffers/how-to-run-multiple-webpack-instances-on-the-same-page-and-avoid-any-conflicts -4e2fe0f016d1

它基本上说：

\n

Webpack 未在全局命名空间\xe2\x80\xa6 中运行，那么是什么导致了\n问题？它是一个名为 CommonsChunkPlugin 的 Webpack 插件，用于通过 JSONP 进行 ansyc 按需加载代码。该插件注册并使用名为 window.webpackJsonp 的全局函数，这就是发生冲突的地方。

\n

只需更改至少一个正在运行的 webpack 实例的 webpackJsonp 函数的名称即可解决冲突。

\n

但他们在 Webpack …

我升级到Symfony 4.1并切换到Encore后面临一个问题.

Uncaught RangeError: Maximum call stack size exceeded
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)

我试图搜索问题的来源,并且只有在使用来自compose.js(和包含)的jquery include删除所有内容后,Error才会消失.但当然我需要jquery ......

一旦我从'jquery''或'Encore.autoProvidejQuery()'导入jQuery,就会发生错误

Webpack.config.js:

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

let publicPath = '/build/';
if (Encore.isProduction()) { // yarn run encore production
    publicPath = '/****_symfony/build/';
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath(publicPath)
    .setManifestKeyPrefix('build/')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .addEntry('bundle', './assets/compose.js')
    .enableStylusLoader()
    .enableLessLoader()
    .enableSassLoader()
;

const config = Encore.getWebpackConfig(); …

我的项目建立在：

• Symfony / Webpack Encore 包
• webfonts-loader

运行 Lighthouse 审计，提高性能的第一个机会是：

考虑使用<link rel=preload>优先获取当前在页面加载中稍后请求的资源...fonts/app.icons.e5d7e11....woff

如何将带有 rel="preload" 的 Link 标签自动插入到此文件中？

我有 Vuetify 2.2.11，我试图覆盖他们的 SASS 变量。我在 Symfony 3.x 项目中，所以我没有使用 vue-cli 安装 Vuetify。我遵循了Webpack 安装指南，但似乎无法使其正常工作。Vuetify 样式被转储到一个 css 文件（以我的 js: app.js->命名app.css），但不考虑我的覆盖。至于我的项目样式 ( company.scss)，它们被注入<style type="text/css">到 html的标签中。还有一大堆空<style type="text/css"></style>标签，我猜它们来自每个 Vuetify 组件，但我不知道为什么它们是空的。

这是我的代码的样子：

// /assets/js/app.js

import Vue from 'vue';
import vuetify from './plugins/Vuetify';
import FooComponent from './components/FooComponent;

import '../styles/company.scss';

const vmConfig = {
    el: '#app',
    vuetify,
    components: {
        FooComponent
    },
};

new Vue(vmConfig);

// /assets/js/plugins/Vuetify

import Vue from 'vue';

// We import from "lib" to enable the "a-la-carte" …