如何解决webpack-encore 如何与 symfony 5 配合使用?
我对在 symfony 5 项目中处理 webpack-encore 有点生气。 有几件事我只是不明白。首先这里是我的 webpack.config.js :
const Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore"
command.
// It's useful when you use tools that rely on webpack.config.js file.
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/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app','./assets/app.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled,Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but,you probably want this,unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features,see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
//.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery();
module.exports = Encore.getWebpackConfig();
问题是当我在我的模板中使用 {{ asset('build/images/my-image.png') }} 时,虽然它在 assets/images/my-image.png 中,但没有找到该文件>
我应该如何访问我的图片??? 为什么它不在 manifest.json 中? 为什么我的 public/build/ 文件夹中没有图像? 例如,我应该使用什么路径在 app.css 中引用我的图像作为背景图像?
这东西是使用和配置的噩梦..... 提前致谢
解决方法
谢谢你们,你们都是对的,
.copyFiles({
from: './assets/images',// 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)$/
})
我的配置文件中缺少这部分,然后我没有运行构建命令......
但它仍然不是一个简单的工具。 祝你有美好的一天。
,你试过运行构建文件的命令 npm run build 吗?
或运行命令自动重新编译资产 如何文档示例 https://symfony.com/doc/current/frontend/encore/simple-example.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。