Webpack Encore symfony4中的bootstrap＆jquery

Question

我想使用webpackEncore将引导程序和jquery包含到symfony 4项目中，但是我不想使用CDN脚本，我想使用下载的文件...因此，在将Encore安装到项目后，我将bootstrap和jquery文件放在assets文件夹中，如下图所示：

然后，在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')
    
    // JS
    .addEntry('app', './assets/js/app.js')
    .addEntry('bootstrap_js', './assets/js/bootstrap.js')
    .addEntry('fontawesome_js', './assets/js/fontawesome/fontawesome.js')
    .addEntry('jquery', './assets/js/jquery-3.3.1.js')

    // CSS
    .addStyleEntry('bootstrap_css', './assets/css/bootstrap/bootstrap.css')
    .addStyleEntry('fontawesome_css', './assets/css/fontawesome/fontawesome.css')

    // 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()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

有我的模板：

但是当我运行Encore时，它失败了，它说引导程序缺少必需的依赖项：

我应该解决什么问题 注意：我不想将CDN用于引导程序和jquery ...

Answer 1

您似乎已从Bootstrap和FontAwesome下载了源文件。您必须下载经过编译的精简版本，以便所有这些库的依赖项都已包括在内。

您应该下载https://getbootstrap.com/docs/4.3/getting-started/download/#compiled-css-and-js并使用bootstrap.min.js和bootstrap.min.css

如果FontAwesome也有问题，则过程应该相对相同（以编译后的缩小版本为准）

  

注意：您应该避免直接下载文件，而应该使用npm或yarn之类的包管理器来包含您的依赖项，然后将其导入您自己的CSS / JS文件中< / p>

Answer 2

我意识到可以解决该问题，我只是使用npm安装了jquery和popper.js，为什么当我在webpack.config.js中将bootstrap和jquery当作enty时第一个不起作用！!!!

任何人都可以解释！！

Answer 3

我相信您在这两种情况下都缺少路径的一部分-您应该选择

.addEntry('bootstrap_js', './assets/js/bootstrap/bootstrap.js')
.addEntry('jquery', './assets/js/jquery/jquery-3.3.1.js')

因此，基本上相应地添加 bootstrap / 和 jquery /