Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
Keeping the frontend under control with Symfony and Webpack
1. Keeping the frontend
under control with
Symfony and Webpack
Nacho Martín
@nacmartin
nacho@limenius.com
Munich Symfony Meetup
October’16
2. I write code at Limenius
We build tailor made projects
using mainly Symfony
and React.js
So we have been figuring out how to organize better
the frontend
Nacho Martín
nacho@limenius.com @nacmartin
4. Assetic?
No module loading
No bundle orientation
Not a standard solution for frontenders
Other tools simply have more manpower
behind
Written before the Great Frontend Revolution
44. Loading styles: raw*
loaders: [
//…
{ test: /.css$/i, loader: 'raw'},
]
exports.push([module.id, "body {n line-height: 1.5;n padding: 4em 1em;n}nnh2 {n
margin-top: 1em;n padding-top: 1em;n}nnh1,nh2,nstrong {n color: #333;n}nna
{n color: #e81c4f;n}nn", ""]);
Embeds it into JavaScript, but…
*(note: if you are reading the slides, don’t use this loader for css. Use css loader, that will be explained later)
49. File loaders
{ test: /.jpg$/, loader: 'file-loader' },
{ test: /.png$/, loader: 'url-loader?limit=10000' },
Copies file as [hash].jpg, and returns the public url
If file < 10Kb: embed it in data URL.
If > 10Kb: use file-loader
50. Using loaders
When requiring a file
In webpack.config.js, verbose
{
test: /.png$/,
loader: "url-loader",
query: { limit: "10000" }
}
require("url-loader?limit=10000!./file.png");
{ test: /.png$/, loader: 'url-loader?limit=10000' },
In webpack.config.js, compact
60. Optional web-dev-server
Kudos Ryan Weaver
class AppKernel extends Kernel
{
public function registerContainerConfiguration(LoaderInterface $loader)
{
//…
$loader->load(function($container) {
if ($container->getParameter('use_webpack_dev_server')) {
$container->loadFromExtension('framework', [
'assets' => [
'base_url' => 'http://localhost:8080'
]
]);
}
});
}
}
61. Hot module replacement
output: {
publicPath: 'http://localhost:8080/assets/build/',
path: './web/assets/build',
filename: '[name].js'
},
Will try to replace the code without even page reload
$ webpack-dev-server --hot --inline
62. Hot module replacement
output: {
publicPath: 'http://localhost:8080/assets/build/',
path: './web/assets/build',
filename: '[name].js'
},
Will try to replace the code without even page reload
Needs full URL (so only in dev), or…
$ webpack-dev-server --hot --inline
63. Hot module replacement
output: {
publicPath: 'http://localhost:8080/assets/build/',
path: './web/assets/build',
filename: '[name].js'
},
$ webpack-dev-server --hot --inline --output-public-path
http://localhost:8080/assets/build/
Will try to replace the code without even page reload
Needs full URL (so only in dev), or…
$ webpack-dev-server --hot --inline
84. Provide plugin
plugins: [
new webpack.ProvidePlugin({
_: 'lodash',
$: 'jquery',
}),
]
$("#item")
_.find(users, { 'age': 1, 'active': true });
These just work without requiring them:
85. Exposing jQuery
{ test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },
Exposes $ and jQuery globally in the browser
86. Dealing with a mess
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('imports?define=>false&exports=>false!blueimp-load-image/js/load-image-meta.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-image.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-ui.js');
Broken packages that are famous
have people that have figured out how to work
with them
87. CopyWebpackPlugin for messes
new CopyWebpackPlugin([
{ from: './client/messyvendors', to: './../mess' }
]),
For vendors that are broken,
can’t make work with Webpack but I still need them
(during the transition)
89. Summary:
• What is Webpack
• Basic setup
• Loaders are the bricks of Webpack
• Have nice tools in Dev environment
• Optimize in Prod environment
• Split your bundle as you need
• Tips and tricks
90. MADRID · NOV 27-28 · 2015
Thanks!
@nacmartin
nacho@limenius.com
http://limenius.com