Eric Katz
Web Developer based in Columbus, OH.
webpack ⚡talk
with eric katz
why webpack?
When you start doing javascript...
<head>
...
<script src="main.js"></script>
<!-- 3kb -->
</head>It grows...
<head>
...
<script src="main.js"></script>
<!-- 100kb -->
</head>Reorganize
<head>
...
<script src="jquery.js" />
<script src="main.js" />
<script src="login.js" />
<script src="map.js" />
<script src="contact.js" />
<!-- smaller pieces -->
</head>Make modules, turn to build tools
<head>
...
<script src="/dist/main.min.js" />
</head>
Write specific tasks... scripts, styles, build, dev
webpack is just the next iteration
on the road to a better process
source: http://www.lakearrowhead.com/
webpack concepts
Entry
Output
Loaders
Plugins
webpack concepts - entry
module.exports = {
entry: './src/main.js'
};// will default check node_modules to resolve
module.exports = {
entry: {
main: './src/main.js',
vendors: ['jquery', 'jquery.tablesorter.js']
}
};webpack concepts - output
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
}
};const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};webpack concepts - loaders
const path = require('path');
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
};
module.exports = config;webpack concepts - plugins
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
};
module.exports = config;AND...
More cool things
- Tree Shaking // Code Efficiency
- Webpack Dev Server // Dev environment
- Hot Reloading // Better than live reload, I promise
- Built in Asset Handling
https://webpack.js.org/
Thanks!
⚡
Webpack ⚡
By Eric Katz
