Más contenido relacionado La actualidad más candente (20) Similar a Packing for the Web with Webpack (20) Packing for the Web with Webpack3. Initial state
• Plain JavaScript
• Global functions and variables
• Unorganized code (no structure)
• Repeated code
• No tests
• Server and client code together
• Different libraries
14. How does it work?
App.js
MoviesService.js
AnotherModule.js
MoviesCache.js
UsersService.js Lodash.js
18. Multiple entry points
module.exports = {
entry: {
page1: './src/app.js',
page2: './src/movies.js',
page3: './src/admin.js',
},
output: {
path: './dist',
filename: '[name].js'
}
}
20. A loader
module.exports = {
…
module: {
loaders:[
{
test: /.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel',
}
]
}
23. Not only JavaScript, css…
module.exports = {
…
module: {
loaders:[
{
test: /.css?$/,
include: path.resolve(__dirname, 'src'),
loaders: ['style', 'css'],
}
]
}
26. CSS with images
module.exports = {
…
module: {
loaders:[
{
test: /.(gif|jpg|png)?$/,
include: path.resolve(__dirname, 'src'),
loader: 'url?limit=10000?name=images/[name].[ext]',
}
]
}
27. CSS modules
module.exports = {
…
module: {
loaders:[
{
test: /.css?$/,
include: path.resolve(__dirname, 'src'),
loader: 'style!css?modules&camelCase'
}
]
}
28. CSS modules
var styles = require('./app.css');
var el = document.createElement('div');
el.innerText = 'Hello opencode';
el.className = styles.testClass;
document.body.appendChild(el);
39. Extract CSS
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
…
module: {
loaders:[
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css'),
}
],
plugins:[
new ExtractTextPlugin('bundle.css')
]
43. Common chunk plugin
module.exports = {
entry: {
page1: './src/app.js',
page2: './src/movies.js',
page3: './src/admin.js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({ name: 'shared' })
]
}
44. Common chunk plugin - vendors
module.exports = {
entry: {
app: './src/app.js',
vendor: ['jquery', 'react', 'lodash']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' })
]
}
47. Conclusion
• One tool for bundling and building
• Loaders for individual files
• Plugins for the complete bundle
Notas del editor Good with long term caching