utiliser webpack dans une application symfony
TRANSCRIPT
![Page 1: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/1.jpg)
IntegrateWebpackinaSymfonyapp
Howto?
1 . 1
![Page 2: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/2.jpg)
Me?
LeadDeveloperSensioLabs@al0neh
AlainHippolyte
1 . 2
![Page 3: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/3.jpg)
AsseticTransformassetsviafiltersNotinSymfonyStandardEditionanymore
2 . 1
![Page 4: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/4.jpg)
2 . 2
![Page 5: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/5.jpg)
AsseticdrawbacksNotthebestDXNotcontentawareNotfrontenddevfriendlyPoorlymaintained
2 . 3
![Page 6: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/6.jpg)
3 . 1
![Page 7: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/7.jpg)
Modulebundler
3 . 2
![Page 8: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/8.jpg)
Moduleonesinglefunctionalunit
https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript3 . 3
![Page 9: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/9.jpg)
BundlertakesmoduleswithdependenciesandemitsstaticassetsrepresentingthosemodulesliketheServiceContainerinSymfony
3 . 4
![Page 10: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/10.jpg)
≠
3 . 5
![Page 11: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/11.jpg)
FeaturesLoadssourcefilesTransformsassetsProducesassetbundlesGeneratesartifacts(hashes,srcmaps)GreatDX
3 . 6
![Page 12: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/12.jpg)
Howdoesitwork?
3 . 7
![Page 13: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/13.jpg)
3 . 8
![Page 14: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/14.jpg)
The4CoreConceptsEntries-Wheretostart?Output-Wheretooutput?Loaders-Howtotransform?Plugins-Howtobundle?
4 . 1
![Page 15: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/15.jpg)
webpack.config.js
module.exports={entry:{...},output:{...},module:{rules:[...]},plugins:[...]};
4 . 2
![Page 16: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/16.jpg)
Entries//shortandsyntaxconstconfig={entry:'./src/app.js'};
//Objectsyntaxconstconfig={entry:{app:'./src/app.js',vendor:'./src/vendor.js'}};
Wheretostart?
4 . 3
![Page 17: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/17.jpg)
Output
module.exports={output:{path:'./web/builds',filename:'bundle.js',publicPath:'/builds/'}};
Wheretooutput?
4 . 4
![Page 18: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/18.jpg)
Loaders
module.exports={module:{rules:[{test:/\.js$/,use:'babel-loader'}]}};
Howtotransform?
4 . 5
![Page 19: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/19.jpg)
Commonloaders
Transpiler:babel-loader,ts-loaderStyles:css-loader,style-loaderFiles:url-loader,file-loaderLinting:jslint-loader
https://webpack.js.org/loaders/4 . 6
![Page 20: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/20.jpg)
Plugins
module.exports={plugins:[newwebpack.optimize.UglifyJsPlugin()]};
https://webpack.js.org/plugins/
bundle-wideprocessing
4 . 7
![Page 21: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/21.jpg)
GettingStarted
5 . 1
![Page 22: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/22.jpg)
AgendaEntryConfigureWebpackwithSCSSfilesImportfonts
5 . 2
![Page 23: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/23.jpg)
InstallWebpack1/Makeapackage.jsonfile
{"name":"sf-live-2017-symfony-webpack","version":"1.0.0","devDependencies":{"babel-core":"^6.24.0","babel-loader":"^6.4.1","webpack":"^2.2.1"}}
$npminstall$./node_modules/.bin/webpack
5 . 3
![Page 24: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/24.jpg)
Myfirstwebpackentry
//app/Resources/assets/js/main.js
console.log('SymfonyLiveParis2017');
{#app/Resources/views/base.html.twig#}
<scriptsrc="{{asset('builds/bundle.js')}}"></script>
5 . 4
![Page 25: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/25.jpg)
webpack.config.jsmodule.exports={entry:{app:'./app/Resources/assets/js/app.js',},output:{path:'./web/builds',filename:'bundle.js',publicPath:'/builds/'},module:{rules:[{test:/\.js$/,exclude:/(node_modules)/,use:'babel-loader'}]}};
5 . 5
![Page 26: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/26.jpg)
./node_modules/.bin/webpack
5 . 6
![Page 27: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/27.jpg)
Addoursassloader
//app/Resources/assets/scss/app.scss
$icon-font-path:"~bootstrap-sass/assets/fonts/bootstrap/";
@import"variables";@import"~bootstrap-sass/assets/stylesheets/bootstrap";@import"bootstrap-theme";
//app/Resources/assets/js/app.js
import'../scss/app.scss';
6 . 1
![Page 28: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/28.jpg)
Installsassdependencies
module:{rules:[//...+{+test:/\.scss$/,+use:[+{loader:"style-loader"},+{loader:"css-loader"},+{loader:"sass-loader"}+]+}]};
./node_modules/.bin/webpack
$npminstall--save-devstyle-loadercss-loadernode-sasssass-loader
6 . 2
![Page 29: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/29.jpg)
Houstonwehaveaproblem
6 . 3
![Page 30: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/30.jpg)
//app/Resources/assets/scss/bootstrap.scss
@font-face{font-family:'GlyphiconsHalflings';src:url(#{$icon-font-path}glyphicons-halflings-regular.eot'));//...}
6 . 4
![Page 31: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/31.jpg)
Let'sfixthat!
module.exports={module:{rules:[//...+{+test:/\.woff2?$|\.ttf$|\.eot$|\.svg$/,+use:"file-loader"+}]}};
Installfile-loaderdependency
6 . 5
![Page 32: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/32.jpg)
//app/Resources/assets/saas/main.scss
//...
@import"../css/font-awesome-4.6.3.min.css";@import"../css/font-lato.css";@import"../css/bootstrap-datetimepicker.min.css";@import"../css/highlight-solarized-light.css";@import"../css/main.css";
Importotherstyles
6 . 6
![Page 33: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/33.jpg)
12 3 4 5
6
1. GoogleFontLatoimport2. Bootstrap3. font-lato.css4. bootstrap-datetimepicker.min.css5. highlight-solarized-light.css6. main.css
6 . 7
![Page 34: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/34.jpg)
Summary
ImportabootstrapthemeUseWebpacktotransformSCSSfilesUseWebpacktoworkwithfonts
7
![Page 35: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/35.jpg)
Now,JS
8 . 1
![Page 36: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/36.jpg)
//app/Resources/assets/js/app.js
import"../scss/app.scss";
import"./jquery-2.1.4.min";import"./bootstrap-3.3.4.min";//...
CommonproblemwithWebpack
JqueryInlineJS
8 . 2
![Page 37: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/37.jpg)
Let'sgetfixthem
8 . 3
![Page 38: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/38.jpg)
JqueryconstjqueryPath='app/Resources/assets/js/jquery-2.1.4.min.js';module.exports={plugins:[newwebpack.ProvidePlugin({$:"jquery",jQuery:"jquery","window.jQuery":"jquery",}),],resolve:{alias:{jquery:path.resolve(__dirname,jqueryPath)}},};
8 . 4
![Page 39: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/39.jpg)
//login.html.twig{%blockjavascripts%}{#...#}<script>$(document).ready(function(){varusernameEl=$('#username');varpasswordEl=$('#password');
if(!usernameEl.val()&&!passwordEl.val()){usernameEl.val('anna_admin');passwordEl.val('kitten');}});</script>{%endblock%}
8 . 5
![Page 40: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/40.jpg)
$npminstall--save-devexpose-loader
rules:[+{+test:/jquery/,+use:[+{+loader:'expose-loader',+options:'$'+},+{+loader:'expose-loader',+options:'jQuery'+}+]+}]
8 . 6
![Page 41: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/41.jpg)
Everythingisgood!
8 . 7
![Page 42: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/42.jpg)
WebpackDevServer
9 . 1
![Page 43: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/43.jpg)
$npminstall--save-devwebpack-dev-server
module.exports={plugins:[newwebpack.HotModuleReplacementPlugin()],devServer:{hot:true,contentBase:'./web/'},devtool:'inline-source-map',};
9 . 2
![Page 44: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/44.jpg)
//app/AppKernel.phpclassAppKernelextendsKernel{publicfunctionregisterContainerConfiguration(LoaderInterface$loader){//...$loader->load(function($container){if($container->getParameter('use_webpack_dev_server')){$container->loadFromExtension('framework',['assets'=>['base_url'=>'http://localhost:8080/']]);}});}}
RyanWeaver
./node_modules/.bin/webpack-dev-server
9 . 3
![Page 45: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/45.jpg)
Prepareforproduction
10 . 1
![Page 46: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/46.jpg)
10 . 2
![Page 47: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/47.jpg)
module.exports={module:{rules:[{test:/\.scss$/,+use:ExtractTextPlugin.extract({+fallback:'style-loader',+use:['css-loader','sass-loader']+})}]},plugins:[+newExtractTextPlugin('app.css')]};
{#app/Resources/views/base.html.twig#}+{%blockstylesheets%}+<linkrel="stylesheet"href="{{asset('builds/app.css')}}">+{%endblock%}
Extractcssintoaseparatedfile
10 . 3
![Page 48: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/48.jpg)
SplitvendorswithCommonChunksPluginmodule.exports={entry:{vendor:['jquery','bootstrap-sass']},output:{filename:'[name].js'},plugins:[newwebpack.optimize.CommonsChunkPlugin({name:'vendor'})]};
{#app/Resources/views/base.html.twig#}{%blockjavascripts%}+<scriptsrc="{{asset('builds/vendor.js')}}"></script><scriptsrc="{{asset('builds/app.js')}}"></script>{%endblock%}
10 . 4
![Page 49: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/49.jpg)
MinifywithUglifyJs
SupportedbyWebpackoutof
thebox!
module.exports={plugins:[+newwebpack.optimize.UglifyJsPlugin({+beautify:false,+compress:{+screw_ie8:true,+warnings:false+},+mangle:{+screw_ie8:true,+keep_fnames:true+},+comments:false+})]};
10 . 5
![Page 50: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/50.jpg)
Minifyourstyles{test:/\.scss$/,use:ExtractTextPlugin.extract({fallback:'style-loader',use:[{loader:'css-loader',options:{//CSSNanoconfigurationminimize:{discardComments:{removeAll:true},core:true,minifyFontValues:true}}},'sass-loader']})}
10 . 6
![Page 51: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/51.jpg)
Longtermcaching
10 . 7
![Page 52: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/52.jpg)
constWebpackManifestPlugin=require('webpack-manifest-plugin');
module.exports={output:{filename:'[name].[chunkhash].js'},plugins:[newWebpackManifestPlugin({fileName:'manifest.json'})]};
$npminstall--save-devwebpack-manifest-plugin
InstallWebpackManifestplugin
10 . 8
![Page 53: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/53.jpg)
https://github.com/symfony/symfony/pull/22046
Symfony3.3
10 . 9
![Page 54: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/54.jpg)
//app/config/config_prod.yml
framework:assets:json_manifest_path:'%kernel.root_dir%/../web/builds/manifest.json'
10 . 10
![Page 55: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/55.jpg)
Tips
11 . 1
![Page 56: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/56.jpg)
Treeshaking
onlyincludecodeinyourbundlethatisbeingused
https://blog.engineyard.com/2016/tree-shaking
11 . 2
![Page 57: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/57.jpg)
EnvvarsEnvironmentPlugin:referenceenvvarsthroughprocess.envDefinePlugin:globalconstants
11 . 3
![Page 58: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/58.jpg)
OptimizeJsPlugin
optimizeaJavaScriptfileforfasterinitialexecutionandparsing
https://github.com/vigneshshanmugam/optimize-js-plugin11 . 4
![Page 59: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/59.jpg)
DedupePlugin
Deduplicatecommonfiles
https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a
11 . 5
![Page 60: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/60.jpg)
Thankyou!
https://joind.in/talk/94c36
https://github.com/alOneh/sf-live-2017-symfony-webpack
12
![Page 61: Utiliser Webpack dans une application Symfony](https://reader033.vdocuments.mx/reader033/viewer/2022042513/58e4f1ad1a28ab87378b63dd/html5/thumbnails/61.jpg)
Questions?
13