Babel - the transpiler
https://github.com/babel/awesome-babelbabel-plugin-feature-flags
babel-plugin-transform-builtin-extend
How to use?
.babelrc
{
"plugins": [
"babel-plugin-feature-flags",
"babel-plugin-transform-builtin-extend"
]
}
How to use?
.babelrc
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 10"]
}
}]
]
}
Code splitting!!!
Lots of loaders
Great community
Flat outputs
Leaner, simpler, faster code
React, Vue, Ember, Preact, D3, Three.js, Moment...
Apps => Webpack
Libs => Rollup
Let's get started!
module.exports = {
entry: {
main: pathToMainJSFile
},
output: {
filename: 'bundle.js',
path: pathToDistDir
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
use: ['babel-loader']
}
]
],
resolve: {
extensions: ['.js', '.jsx']
}
}
{
entry: {
main: pathToMainJSFile,
vendors: pathToVendorsIndex
},
output: {
filename: '[name].bundle.js',
path: pathToDistDir
},
module: {
rules: [
{...}
]
],
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
],
resolve: {...}
}
{
entry: {...},
output: {...},
module: {
rules: [
{...},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
],
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),
new ExtractTextPlugin('styles.css')
],
resolve: {...}
}
{
entry: {...},
output: {...},
module: {
rules: [...]
],
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),
new ExtractTextPlugin('styles.css'),
new webpack.DefinePlugin({}),
new UglifyJSPlugin(),
new HTMLWebpackPlugin({title: 'Our App :)'})
],
resolve: {...}
}
{
entry: {
main: pathToMainJSFile,
vendors: pathToVendorsIndex
},
output: {
filename: '[name].bundle.js',
path: pathToDistDir
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
use: ['babel-loader']
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
],
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),
new ExtractTextPlugin('styles.css'),
new webpack.DefinePlugin({}),
new UglifyJSPlugin(),
new HTMLWebpackPlugin({title: 'Our App :)'}),
new Visualizer(),
new ManifestPlugin({
fileName: 'asset-manifest.json'
})
],
resolve: {
extensions: ['.js', '.jsx']
}
}
{
entry: {
main: pathToMainJSFile,
vendors: pathToVendorsIndex
},
output: {
filename: '[name].bundle.js',
path: pathToDistDir
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
use: [{
loader: 'babel-loader',
options: {
presets: ['env', {
modules: false,
useBuiltIns: true,
targets: {
browsers: [
'Chrome >= 60',
'Safari >= 10.1',
'iOS >= 10.3',
'Firefox >= 54',
'Edge >= 15',
],
},
}],
}
}]
}
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
],
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),
new ExtractTextPlugin('styles.css'),
new webpack.DefinePlugin({}),
new UglifyJSPlugin(),
new HTMLWebpackPlugin({title: 'Our App :)'}),
new Visualizer(),
new ManifestPlugin({
fileName: 'asset-manifest.json'
})
],
resolve: {
extensions: ['.js', '.jsx']
}
}