webpack encore symfony4中的bootstrap和jquery

Posted 2021-04-02

我想使用webpackEncore将bootstrap和jquery包含到symfony 4项目中，但是我不想使用cdn脚本，我确实想使用下载的文件...所以，在安装了安装到项目之后，我把bootstrap资产文件夹中的jquery和jquery文件，如下图所示：

然后，在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();

还有我的模板：

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

我应该怎么解决问题NB：我不想使用cdn进行bootstrap和jquery ...

答案

看起来你已经从Bootstrap和FontAwesome下载了源文件。您必须下载已编译的缩小版本，以便已包含这些库的所有依赖项。

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

如果您遇到Font Awesome问题，那么该过程应该相对相同（采用已编译的缩小版本）

注意：您应该避免直接下载文件，而是使用像npm或yarn这样的包管理器来包含您的依赖项，然后将它们导入到您自己的CSS / JS文件中

另一答案

我意识到要解决这个问题，我只是使用npm安装jquery和popper.js，为什么第一个没有工作，而我把bootstrap和jquery作为enty在webpack.config.js！

任何人都可以解释!!!

另一答案

我相信你在两种情况下都缺少一部分路径 - 你应该去

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

所以基本上相应地添加bootstrap /和jquery /