我想从多个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文件后,某些函数未定义,为什么?
答案 0 :(得分:5)
您只需要一个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文件
答案 1 :(得分:2)
多个.addStyleEntry
将创建多个文件。您可以将数组传递到.addStyleEntry
中,以用多个css / sass / less文件制作单个css文件,例如:
.addStyleEntry('style', ['./src/sass/style.scss', './node_modules/swiper/dist/css/swiper.css'])
这将创建一个style.css。数组条目的顺序与css文件中的输出匹配。