Symfony Webpack Encore，将多个JS / CSS文件转换为一个文件

Question

我想从多个css / js文件创建一个css / js文件。多个addEntry无法正常工作，请检查我的代码并提供解决方案。

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

Encore
        // the project directory where compiled assets will be stored
        .setOutputPath('web/build/')
        // the public path used by the web server to access the previous directory
        .setPublicPath('/build')
        .cleanupOutputBeforeBuild()
        .enableSourceMaps(!Encore.isProduction())
        // uncomment to create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        // uncomment for legacy applications that require $/jQuery as a global variable
        //.autoProvidejQuery()
        // uncomment to define the assets of the project
        .addEntry('js/app', './assets/js/app.js')
        .addEntry('js/uploader', './assets/js/uploader.js')
        .addStyleEntry('css/icons', './assets/css/icons.scss')
        .addStyleEntry('css/app', './assets/css/app.scss')
        .addStyleEntry('css/uploader', './assets/css/uploader.scss')

        // uncomment if you use Sass/SCSS files
        .enableSassLoader()
        .enableBuildNotifications();

module.exports = Encore.getWebpackConfig();

并添加普通的jQuery，并且在添加js文件后，某些函数未定义，为什么？

Answer 1

您只需要一个addEntry调用。我使用的解决方案是创建一个main.js文件，在其中导入所有文件。例如：

// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './global.css';
import './easy-autocomplete.custom.css';

// JS
const $ = require('jquery/dist/jquery.min');
const jQuery = $;
import 'bootstrap';
import 'jscroll/jquery.jscroll';
import 'easy-autocomplete';
import './global.js';

然后，您可以像下面这样在addEntry中使用此文件：

.addEntry('app', './assets/main.js')

运行Encore之后，您将获得一个web / build / app.js文件和一个web / build / app.css文件

Answer 2

多个.addStyleEntry将创建多个文件。您可以传递一个数组，.addStyleEntry以从多个 css/sass/less 文件中创建一个 css 文件，例如：

.addStyleEntry('style', ['./src/sass/style.scss', './node_modules/swiper/dist/css/swiper.css'])

这将创建一个 style.css。数组条目的顺序与 css 文件中的输出匹配。