高级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
  • 车把
此工作,包括代码示例,是根据创作共用BY-SA 3.0许可证。