高级Webpack配置
编辑本页警告:您正在浏览的文档欧宝官网下载appob娱乐下载Symfony 5.3，现已不再维护。
读本页的更新版本用于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 2 3 4 5
#如果你使用Yarn包管理器＄yarn encore dev——config-name firstConfig#如果你使用NPM包管理器＄运行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”还要为每个构建定义资产清单:
1 2 3 4 5 6 7 8
#配置/包/ assets.yaml框架:资产:包:first_build:json_manifest_path:' % kernel.project_dir % /公共/ first_build / manifest.json 'second_build:json_manifest_path:' % kernel.project_dir % /公共/ second_build / manifest.json '的第三个可选参数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）少手写笔vueeslint打印稿(别名ts）车把
