Symfony4.2 资产编译

Question

我有一个使用 Symfony4.2 的应用程序，但从 4.0 开始，然后是 4.1。

Assets 编译似乎在 4.2 中发生了变化，现在有 {{ encore_entry_link_tags('app') }} 或 entrypoints.json 和 runtime.js。

或者这两个最后的文件应该在那里。

当然我安装了webpack-encore-bundle + npm/yarn 包这样link。

但是当我使用yarn encore dev 或./node_modules/.bin/encore dev 编译时，这些文件不在我的build 文件夹中。

所以我有例外使用encore_entry_link_tags：

An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file "/path/to/.../public/build/entrypoints.json" does not exist.").

我使用fomantic-ui 作为前端库，它似乎不适用于 yarn (yarn install raise some exceptions)，所以可能所有的包都没有安装？

我尝试使用npm install 而不是yarn install，但似乎缺少一些东西，我仍然没有这些entrypoint.json 和runtime.js 文件。

这里的信息是我的 webpackConfig

// webpack.config.js
let Encore = require('@symfony/webpack-encore');

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath((!Encore.isProduction()) ? '/rapp/build' : '/build')

    // this is now needed so that your manifest.json keys are still `build/foo.js`
    // i.e. you won't need to change anything in your Symfony app
    .setManifestKeyPrefix('build')

    // will create public/build/main.js and public/build/main.css
    .addEntry('main', './assets/js/main.js')
    //Add entry if other js/css needed. first parameter is the generated filename.
    //require scss file in js. (if you addEntry for scss file only, it will create a js file with same name)
    .addEntry('reader', './assets/js/reader.js')

    //file upload with dropzone
    .addEntry('dropzone', './assets/js/dropzone.js')

    //Admin chapter js
    .addEntry('admin-chapter', './assets/js/chapter.js')

    .addEntry('admin-unfollow', './assets/js/backend/unfollow.js')

    //addStyleEntry : for css file only
    .addStyleEntry('public', './assets/css/public.scss')

    // allow sass/scss files to be processed
    .enableSassLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

// create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    .createSharedEntry('vendor', [
        'jquery',
    ])

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })

    /*.copyFiles({
        from: './assets/img',
        // optional target path, relative to the output dir
        //to: 'images/[path][name].[ext]',

        // if versioning is enabled, add the file hash too
        to: 'images/[path][name].[hash:8].[ext]',

        // only copy files matching this pattern
        pattern: /\.(png|jpg|jpeg|gif|ico|svg|webp)$/
    })*/

    .configureFilenames({
        images: '[path][name].[hash:8].[ext]'
    })
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

在 webpackConfig 中，copyFiles 方法也会引发异常：Error: Encore.copyFiles is not a recognized property or method.

我不知道我从 symfony4.1 升级并安装 encore js 和 bundle 是否完全搞砸了，但新的 Symfony 资产似乎很糟糕。

编辑：

我按照here 的步骤操作，现在出现异常，阻止所有编译。

"./node_modules/.bin/encore" dev Running webpack ...

D:\PhpStormProjects\bookuto\node_modules\webpack-cli\bin\cli.js:235
                                throw err;
                                ^

TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\mini-css-extract-plugin\dist\index.js:26:44)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\@symfony\webpack-encore\lib\loaders\css-extract.js:12:30)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\@symfony\webpack-encore\lib\config-generator.js:12:30)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

yarn encore dev 出现同样的错误。

Answer 1

我设法解决了它！

对于拥有“旧”symfony 应用程序的人，请注意

• 像这样更新 webpack 版本："webpack": "^4.28.4"

编译 webpackEncore 时会出现警告：WARNING Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues. 但是，就我而言，我从我的package.json 中删除了 webpack，它完全停止工作，说“找不到 webpack”或类似的东西

• 将您的 "@symfony/webpack-encore" 至少更新为 "^0.21.0"

• 如果您没有symfony-flex，请添加以下这些配置文件

assets.yaml

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

webpack_encore.yaml

webpack_encore:
    # The path where Encore is building the assets.
    # This should match Encore.setOutputPath() in webpack.config.js.
    output_path: '%kernel.project_dir%/public/build'

在你的bundles.php

Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],

• 至少将您的"sass-loader" 更新为"^7.0.1"（建议，如果您的版本较低，它会在 webpack 配置文件中引发有关某些功能的警告。）

希望我没有错过任何东西，希望它可以帮助其他人。