高级Webpack配置
编辑本页警告:您正在浏览的文档欧宝官网下载appob娱乐下载Symfony 5.2,现已不再维护。
读本页的更新版本用于Syob娱乐下载mfony 6.2(当前稳定版本)。
高级Webpack配置
总之,Encore生成用于您的Webpack配置webpack.config.js
文件。Encore不支持添加所有的Webpack配置选项,因为你可以自己添加很多。
例如,假设您需要自动解析一个新的扩展。要做到这一点,从Encore获取后修改配置:
12 3 4 5 6 7 8 9 10 11 12 13 14
/ / webpack.config.js常量安可=需要(“@ob娱乐下载symfony / webpack-encore”);/ /……所有Encore配置在这里//获取配置,然后修改它!常量config = Encore.getWebpackConfig();//添加扩展名config.resolve.extensions.push (json的);//导出最终配置模块.exports = config;
但是要注意不要意外地覆盖Encore中的任何配置:
1 2 3 4 5 6 7 8
/ / webpack.config.js/ /……// GOOD -修改config.resolve.extensions数组config.resolve.extensions.push (json的);// BAD -替换由Encore添加的任何扩展// config.resolve.extensions = ['json'];
配置监视选项和轮询
Encore提供了方法configureWatchOptions ()
配置看选项运行时返场开发——观看
或安可dev-server
:
1 2 3 4 5
Encore.configureWatchOptions (函数(watchOptions){//启用轮询并每250ms检查一次更改当在虚拟机中运行Encore时,轮询是有用的watchOptions。调查=250;});
定义多个Webpack配置
Webpack支持传递配置数组,它们是并行处理的。Webpack Encore包含一个重置()
对象,该对象允许重置当前配置的状态以构建一个新配置:
12 34 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
//定义第一个配置安可.setOutputPath (“公共/构建/ first_build /”) .setPublicPath (“/构建/ first_build”) .addEntry (“应用程序”,“/资产/ app.js。”) .addStyleEntry (“全球”,”。/资产/风格/ global.scss”) .enableSassLoader() .autoProvidejQuery() .enableSourceMaps(!Encore.isProduction());//构建第一个配置常量firstConfig = Encore.getWebpackConfig();//为配置设置一个唯一的名称(稍后需要!)firstConfig.name =“firstConfig”;//重置Encore以构建第二个配置Encore.reset ();//定义第二个配置安可.setOutputPath (“公共/构建/ second_build /”) .setPublicPath (“/构建/ second_build”) .addEntry (“移动”,“/资产/ mobile.js。”) .addStyleEntry (“移动”,”。/资产/风格/ mobile.less”) .enableLessLoader() .enableSourceMaps(!Encore.isProduction());//构建第二个配置常量secondConfig = Encore.getWebpackConfig();//为配置设置一个唯一的名称(稍后需要!)secondConfig.name =“secondConfig”;//将最终配置导出为多个配置的数组模块.exports = [firstConfig, secondConfig];
当运行Encore时,两个配置将并行构建。如果您喜欢单独构建配置,请传递——config-name
选择:
1
$yarn encore dev——config-name firstConfig
接下来,定义每个构建的输出目录:
1 2 3 4 5 6
#配置/包/ webpack_encore.yamlwebpack_encore:output_path:“% kernel.project_dir % /公共/ default_build”构建:firstConfig:“% kernel.project_dir % /公共/ first_build”secondConfig:“% kernel.project_dir % /公共/ second_build”
的第三个可选参数encore_entry_ * _tags ()
函数指定要使用哪个版本:
1 2 3 4 5 6 7
{#使用入口点。json file located in ./public/first_build #}{{encore_entry_script_tags('app', null, 'firstConfig')}}{{encore_entry_link_tags('global', null, 'firstConfig')}}{#使用入口点。json file located in ./public/second_build #}{{encore_entry_script_tags('mobile', null, 'secondConfig')}}{{encore_entry_link_tags('mobile', null, 'secondConfig')}}
不使用命令行界面生成Webpack配置对象
通常你会用你的webpack.config.js
通过从命令行界面调用Encore来生成文件。但有时,不使用Encore的工具(例如测试运行器,例如业力).
问题是,如果您尝试生成Webpack配置对象而不使用再来一个
命令时,您将遇到以下错误:
1
错误:Encore.setOutputPath()还不能被调用,因为运行时环境似乎没有被配置。确保你正在使用encore可执行文件,或者如果你故意不直接调用encore,首先调用encore . configureruntimeenvironment()。
这条消息背后的原因是Encore在创建配置对象之前需要知道一些事情,最重要的是目标环境是什么。
解决这个问题可以使用configureRuntimeEnvironment
.此方法必须从JavaScript文件中调用之前要求webpack.config.js
.
例如:
1 2 3 4 5 6 7
常量安可=需要(“@ob娱乐下载symfony / webpack-encore”);//设置运行环境Encore.configureRuntimeEnvironment (“开发”);//获取Webpack配置对象常量webpackConfig =需要(”。/ webpack.config ');
如果需要,你还可以将你通常在命令行界面中使用的所有选项传递给该方法:
1 2 3 4 5 6
Encore.configureRuntimeEnvironment (“dev-server”, {//相同的选项// CLI实用程序,它们的名字在camelCase中。https:真正的,keepPublicPath:真正的});
完全控制加载器规则
该方法configureLoaderRule ()
提供一个干净的方式配置Webpack加载器规则(module.rules
,请参阅配置).
这是一个低级方法。在将加载器规则推送到Webpack之前,将应用所有修改。这意味着您可以覆盖Encore提供的默认配置,这可能会破坏一些东西。使用时要小心。
的一种用途可能是配置eslint-loader
来lint Vue文件。下面的代码是等价的:
12 3 4 5 6 7 8 9 10 11 12 13 14
/ /手动常量webpackConfig = Encore.getWebpackConfig();常量eslintLoader = webpackConfig.module.rules.find(规则= >规则。加载程序= = =“eslint-loader”);eslintLoader。测试=/ \ (jsx ? | vue) /美元;返回webpackConfig;//使用Encore.configureLoaderRule()Encore.configureLoaderRule (“eslint”, loaderRule => {loaderRule。测试=/ \ (jsx ? | vue) /美元});返回Encore.getWebpackConfig ();
-
下面的加载器可以配置
configureLoaderRule ()
: -
javascript
(别名js
)css
图片
(但使用configureImageRule ()
相反)字体
(但使用configureFontRule ()
相反)萨斯
(别名scss
)少
手写笔
vue
eslint
打印稿
(别名ts
)车把