如何使用webpack在Shopware 6中加载单独的JS文件?
什么?
我尝试使用WebPack在all.js文件旁边加载一个单独的javascript文件。
为什么?
all.js文件可能会变得非常大,你会在页面上加载不必要的javascript。因此,通过使用代码拆分(这应该是可能的,因为WebPack在Shopware 6中实现)和动态导入,您可以停止加载不必要的JavaScript。
我所尝试的
我在主题插件的根目录下添加了一个webpack.config.js文件,如下所示:
module.exports = {
entry: {
main: './src/main.js',
separateFile: './src/js/separate.js'
},
output: {
filename: '[name].js'
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
运行bin/build-storefront.sh
后,没有在公共文件夹中添加单独的JS文件。
我还尝试在src/Resources/app/storefront/src/main.js中动态加载这个JS文件,但这导致404,因为单独的文件不存在。
1条答案
按热度按时间6mzjoqzu1#
这将不起作用,因为插件的所有预编译资产都收集在
ThemeCompiler
中并连接到一个脚本中。这是在PHP中完成的,因为node不是生产环境的要求。您可以尝试添加单独的脚本作为额外的custom assets,但您仍然需要扩展模板以手动添加相应的
script
标记。