(2018) Webpack Encore - Asset Management for the rest of us
1 like1,071 views
The document discusses Webpack Encore as a tool for modern asset management, focusing on its capabilities for managing JavaScript, CSS, and dependency handling in frontend development. It covers features like modular bundling, transpilation, and optimization, highlighting how Encore simplifies integrating these functionalities into Symfony applications. The author emphasizes the practical advantages of using Encore for both legacy and modern frontend code, while advising against using its unstable versions.
![6
define('my/module',
['jquery', 'lodash', 'moment'],
function($, _, moment) {
var Clock = function($el) {
this.time = moment();
this.$el = $el;
}
Clock.prototype = {
getServerTime: function() {
$.get('http://fixed.url.com', function(err, res) {
this.time = moment(res.time)
this.$el.text(this.time.format("HH:ii"))
})
}
}
var clock = new Clock($('#clock-div'));
clock.getServerTime();
return clock;
})
some quite old javascript.
<script src=“require.js"></script>
<script src="app.js"></script>](https://image.slidesharecdn.com/encore2018-181028204701/85/2018-Webpack-Encore-Asset-Management-for-the-rest-of-us-6-320.jpg)
![16
const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const provide = new webpack.ProvidePlugin({
$: "cash-dom",
jQuery: "cash-dom"
});
module.exports = {
entry: {
index: "./assets/js/index.js"
},
output: {
filename: "[name].[hash].js",
publicPath: "/dist/",
path: path.resolve(__dirname, "public/dist")
},
plugins: [
new CleanWebpackPlugin(["public/dist"]),
new ManifestPlugin({
writeToFileEmit: true
}),
provide
],
module: {
rules: [
{
test: /.(sa|sc|c)ss$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: [require("autoprefixer")()]
}
},
"sass-loader"
]
},
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const webpack = require("webpack");
module.exports = merge(common, {
mode: "development",
devtool: "cheap-module-eval-source-map", //inline-source-map,
output: {
publicPath: "http://localhost:8080/dist/"
},
devServer: {
host: "localhost",
publicPath: "/dist/",
https: false,
contentBase: "./public/dist",
hot: true,
inline: true,
headers: {
"Access-Control-Allow-Origin": "*"
}
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
});
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const OptimizeCssAssetsPlugin = require("optimize-css-ass
const MiniCssExtractPlugin = require("mini-css-extract-pl
module.exports = merge(common, {
mode: "production",
//devtool: "source-map",
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].[hash].css"
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false // set to true if you want JS so
}),
new OptimizeCssAssetsPlugin({})
],
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[/]node_modules[/]/,
name: "vendors",
chunks: "all"
}
}
}
},
module: {
rules: [
{
test: /.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
//"style-loader",
"css-loader",
//'postcss-loader',
"sass-loader"
]
}
]
}
});
FINALLY WE CAN WRITE NICE JAVASCRIPT?](https://image.slidesharecdn.com/encore2018-181028204701/85/2018-Webpack-Encore-Asset-Management-for-the-rest-of-us-16-320.jpg)
(2018) Webpack Encore - Asset Management for the rest of us
- 1. WEBPACK ENCORE Asset management for the rest of us
- 2. 2 Stefan Adolf Developer Ambassador #javascript #mongodb #serverless #blockchain #codingberlin #elastic #aws #php #symfony2 #react #digitalization #agile #b2b #marketplaces #spryker #php #k8s #largescale #turbinejetzt #iot #ux #vuejs @stadolf elmariachi111
- 4. 4 •Many flavors •ECMAScript 5-8 / 2009-2017, TypeScript, CoffeScript, Flow •Many frameworks •JQuery, Backbone, Ember •React/JSX, Angular, Vue.js •importing dependencies lately solved. •it’s a moving target. Frontend: the final frontier. •Lots of quirks, lots of frameworks •LESS, Sass / SCSS, Compass •SMACSS, BEM, Atomic CSS •Tools, tools, tools: •PostCss, •Autoprefixer •Reboots •css-modules •styled •CSSinJS
- 5. 5 var APP = APP || {}; APP.Frontend = APP.Frontend || {}; APP.Frontend.Clock = function($el) { this.time = moment(); this.$el = $el; } APP.Frontend.Clock.prototype = { getServerTime: function() { $.get('http://fixed.url.com', function(err, res) { this.time = moment(res.time) this.$el.text(this.time.format("HH:ii")) }) } } var clock = new APP.Frontend.Clock($('#clock-div')); clock.getServerTime(); some old javascript. <script src="jquery.js"></script> <script src="bootstrap.min.js"></script> <script src="moment.js"></script> <script src="app.js"></script>
- 6. 6 define('my/module', ['jquery', 'lodash', 'moment'], function($, _, moment) { var Clock = function($el) { this.time = moment(); this.$el = $el; } Clock.prototype = { getServerTime: function() { $.get('http://fixed.url.com', function(err, res) { this.time = moment(res.time) this.$el.text(this.time.format("HH:ii")) }) } } var clock = new Clock($('#clock-div')); clock.getServerTime(); return clock; }) some quite old javascript. <script src=“require.js"></script> <script src="app.js"></script>
- 7. 7 var $ = require('jquery'); var _ = require('lodash'); var moment = require('moment'); class Clock { constructor($el) { this.time = moment(); this.$el = $el; } getServerTime() { $.get('http://fixed.url.com', (err, res) => { this.time = moment(res.time) this.$el.text(this.time.format("HH:ii")) }) } } var clock = new Clock($('#clock-div')); clock.getServerTime(); module.exports = clock; some recent javascript. $ gulp build <script src="app.js"></script>
- 8. 8 What I really need •latest Javascript language features •dependency management •SCSS compilation •live browser reloading •debugging in the browser •support for old frameworks •don’t take care for old browsers •fast loading times on production •fast build times •instantly useable by new team members
- 9. Boot strap scssscss scss scss product_list.html.twig product_single.html.twig checkout.html.twig $ lodash moment urljs Boot strap.js JS JS JS JS JS JS JS JS JS JS JS JS product.css product.js checkout.jscheckout.css a not so unusual frontend requirement in “fullstack” scenarios
- 10. 10
- 11. 11 Webpack is a module bundler and not a “build” tool.
- 12. 12 THEY ALL TRUST WEBPACK. BECAUSE IT’S SO GREAT.
- 13. 13 •initial setup = no brainer •Javascript files are the root of truth •require scss, images, fonts, data, templates •webpack can take care of •JS transpilation •browser compatibility & polyfilling •image optimization •SCSS compilation & extraction •asset copying / concatenation webpack core
- 14. 14 •babel integration •write modern javascript •transpile Typescript •sourcemaps •style inlining / css components •versioning •long term caching •tree shaking •~ dead code removal •chunk control •common chunks •intelligent entrypoint commons •enables framework syntaxes like •React JSX •Vue single file components •developer experience •file watching •dev-server (reload on build) •HMR (inject changes) •code metrics webpack advanced
- 15. 15 FINALLY WE CAN WRITE NICE JAVASCRIPT Demo
- 16. 16 const path = require("path"); const webpack = require("webpack"); const CleanWebpackPlugin = require("clean-webpack-plugin"); const ManifestPlugin = require("webpack-manifest-plugin"); const provide = new webpack.ProvidePlugin({ $: "cash-dom", jQuery: "cash-dom" }); module.exports = { entry: { index: "./assets/js/index.js" }, output: { filename: "[name].[hash].js", publicPath: "/dist/", path: path.resolve(__dirname, "public/dist") }, plugins: [ new CleanWebpackPlugin(["public/dist"]), new ManifestPlugin({ writeToFileEmit: true }), provide ], module: { rules: [ { test: /.(sa|sc|c)ss$/, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { ident: "postcss", plugins: [require("autoprefixer")()] } }, "sass-loader" ] }, { test: /.js$/, exclude: /(node_modules|bower_components)/, const merge = require("webpack-merge"); const common = require("./webpack.common.js"); const webpack = require("webpack"); module.exports = merge(common, { mode: "development", devtool: "cheap-module-eval-source-map", //inline-source-map, output: { publicPath: "http://localhost:8080/dist/" }, devServer: { host: "localhost", publicPath: "/dist/", https: false, contentBase: "./public/dist", hot: true, inline: true, headers: { "Access-Control-Allow-Origin": "*" } }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ] }); const merge = require("webpack-merge"); const common = require("./webpack.common.js"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin") const OptimizeCssAssetsPlugin = require("optimize-css-ass const MiniCssExtractPlugin = require("mini-css-extract-pl module.exports = merge(common, { mode: "production", //devtool: "source-map", plugins: [ new MiniCssExtractPlugin({ filename: "[name].[hash].css", chunkFilename: "[id].[hash].css" }) ], optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false // set to true if you want JS so }), new OptimizeCssAssetsPlugin({}) ], runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { test: /[/]node_modules[/]/, name: "vendors", chunks: "all" } } } }, module: { rules: [ { test: /.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, //"style-loader", "css-loader", //'postcss-loader', "sass-loader" ] } ] } }); FINALLY WE CAN WRITE NICE JAVASCRIPT?
- 17. encore is a webpack configuration generator
- 19. npm i -D @symfony/webpack-encore or
- 20. 20 const Encore = require("@symfony/webpack-encore"); Encore.setOutputPath("public/dist/") .setPublicPath("/dist") .addEntry("index", "./assets/js/index.js") .cleanupOutputBeforeBuild() .enableSourceMaps(!Encore.isProduction()) .enableVersioning(Encore.isProduction()) .enableSassLoader() .enablePostCssLoader() .enableSingleRuntimeChunk() .createSharedEntry("vendor", “./assets/js/vendor.js"); .autoProvideVariables({ $: "cash-dom", jQuery: "cash-dom" }) module.exports = Encore.getWebpackConfig(); the same thing in encore. multiple entries dev tools dev/prod mode css loading & transformation chunking / splitting global variable shimming all dev tools included automatic manifests / caches
- 21. living on the edge. I’m using encore 0.21 here. That’s ~134 commits ahead of the documented stable release. Demo
- 22. .enableReactPreset() npm install @babel/preset-react@^7.0.0 --save-dev
- 23. .enableVueLoader() npm install vue vue-loader@^15.0.11 vue-template-compiler --save-dev
- 24. 24 •Webpack 2 -> Webpack 4 •“shared commons entries” -> split chunks plugin •dedicated vendor / client code chunks for entries •“vendors.js & manifest.json” will be replaced with “entrypoints.json” •every page gets exactly what it needs •shared runtime chunk •contains the webpack runtime for all pages •dynamic imports (lazy loading specialized libraries / features) •Handlebars loader built in upcoming in the next release
- 25. 25 •massively reduces effort to enable modern frontend features •by being highly opinionated •integrates perfectly into Symfony applications •the simplest way to enable modern frontend support •perfect tool to start migrating old frontend code •not so great to start a SPA/PWA/AMP project (use vue.cli or c-r-app instead) •it just generates configuration •you can always add your own config •simple to “down”grade to plain webpack •you can even use it outside a Symfony context •the current release is stable and production ready. •don’t use the bleeding edge master yet!! wrap up
- 26. Turbine Kreuzberg GmbH Ohlauer Straße 43 10999 Berlin ASSET MANAGEMENT FOR THE REST OF US. @stadolf #turbinejetzt hello@turbinekreuzberg.com https://github.com/elmariachi111/encore-demo