先进Webpack配置
编辑该页面警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 4.3,不再维护。
读这个页面的更新版本Symfob娱乐下载ony 6.2(当前的稳定版本)。
先进Webpack配置
总结,安可生成Webpack配置中使用webpack.config.js文件。安可不支持添加Webpack所有的配置选项,因为很多自己可以添加。
例如,假设您需要自动解决一个新的扩展。要做到这一点,从安可抓取后修改配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/ / webpack.config.jsvar安可=需要(“@ob娱乐下载symfony / webpack-encore”);/ /……这里所有安可配置/ /获取配置,然后修改它!var配置= Encore.getWebpackConfig ();/ /添加一个扩展config.resolve.extensions.push (json的);/ /导出最终配置模块. export =配置;但小心不要覆盖任何从安可配置:
1 2 3 4 5 6 7 8
/ / webpack.config.js/ /……/ /好——这修改config.resolve。扩展数组config.resolve.extensions.push (json的);/ /坏-这替换任何扩展添加安可/ / config.resolve。扩展= (json的);看选项和配置轮询
安可提供了方法configureWatchOptions ()配置看选项运行时安可dev -手表或安可dev-server:
1 2 3 4 5
Encore.configureWatchOptions (函数(watchOptions){/ /启用轮询和检查更改每250毫秒/ /轮询安可虚拟机内运行时是有用的watchOptions。调查=250年;});定义多个Webpack配置
Webpack支持传递一个阵列的配置并行处理。Webpack安可包括一个重置()对象允许重置当前配置的状态来构建一个新的:
1 2 3 4 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 (“应用程序”,”。/资产/ js / app.js”).addStyleEntry (“全球”,”。/资产/ css / global.scss”).enableSassLoader () .autoProvidejQuery () .enableSourceMaps (! Encore.isProduction ());/ /构建第一个配置常量firstConfig = Encore.getWebpackConfig ();/ /设置配置一个唯一的名称(需要稍后!)firstConfig.name =“firstConfig”;/ /重置安可建造第二个配置Encore.reset ();/ /定义第二个配置安可.setOutputPath (“公共/构建/ second_build /”).setPublicPath (“/构建/ second_build”).addEntry (“移动”,”。/资产/ js / mobile.js”).addStyleEntry (“移动”,”。/资产/ css / mobile.less”).enableLessLoader () .enableSourceMaps (! Encore.isProduction ());/ /建立第二个配置常量secondConfig = Encore.getWebpackConfig ();/ /设置配置一个唯一的名称(需要稍后!)secondConfig.name =“secondConfig”;/ /导出最终配置多个配置的一个数组模块. export = [firstConfig, secondConfig];运行时再来一次,两个并行配置将建。如果你喜欢单独构建配置,通过——config-name选择:
1
美元纱安可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
使用entrypoints {#。json file located in ./public/first_build #}{{encore_entry_script_tags(“应用程序”,null, firstConfig)}}{{encore_entry_link_tags(“全球”,null, firstConfig)}}使用entrypoints {#。json file located in ./public/second_build #}{{encore_entry_script_tags(“移动”,null, secondConfig)}}{{encore_entry_link_tags(“移动”,null, secondConfig)}}生成一个Webpack配置对象不使用命令行界面
通常你会用你的webpack.config.js文件从命令行界面通过调用安可。但有时,获得所需的Webpack配置可以生成工具,不要使用安可(例如这样的测试运行器业力)。
问题是,如果你尝试生成,无需使用Webpack配置对象再来一个命令你会遇到以下错误:
1
错误:Encore.setOutputPath()不能,因为运行时环境似乎不配置。确保你使用安可可执行或叫Encore.configureRuntimeEnvironment()首先如果你故意不直接调用安可。消息背后的原因就是安可之前需要知道几件事能够创建一个配置对象,最重要的是什么是目标环境。
您可以使用来解决这个问题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装入器规则。这意味着你可以覆盖默认的配置提供的再来一次,这可能会破坏东西。在使用它时要小心。
一个用可能配置eslint-loader线头Vue文件。下面的代码是等价的:
1 2 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图片字体萨斯(别名scss)少手写笔vueeslint打印稿(别名ts)车把
