Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rstacruz/webpack-tricks
Tips and tricks in using Webpack
https://github.com/rstacruz/webpack-tricks
javascript minification react split webpack
Last synced: 7 days ago
JSON representation
Tips and tricks in using Webpack
- Host: GitHub
- URL: https://github.com/rstacruz/webpack-tricks
- Owner: rstacruz
- Created: 2016-12-21T08:10:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-01-18T08:57:37.000Z (almost 3 years ago)
- Last Synced: 2024-11-30T10:08:17.843Z (14 days ago)
- Topics: javascript, minification, react, split, webpack
- Size: 21.5 KB
- Stars: 2,350
- Watchers: 45
- Forks: 61
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack tricks
Just a small catalog of Webpack tips and tricks I've learned. These tricks work with Webpack v3 unless otherwise specified.
Table of contents
-----------------
* [Progress reporting](#progress-reporting)
* [Minification](#minification)
* [Multiple bundles](#multiple-bundles)
* [Split app and vendor code](#split-app-and-vendor-code)
* [Source maps (Webpack 1)](#source-maps-webpack-1)
* [Source maps (Webpack 2-3)](#source-maps-webpack-2-3)
* [Output CSS files](#output-css-files)
* [Development mode](#development-mode)
* [Investigating bundle sizes](#investigating-bundle-sizes)
* [Smaller React](#smaller-react)
* [Smaller Lodash](#smaller-lodash)
* [Requiring all files in a folder](#requiring-all-files-in-a-folder)
* [Clean up extract-text-webpack-plugin log](#clean-up-extract-text-webpack-plugin-log)
Progress reporting
------------------
Invoke Webpack with:
```
--progress --colors
```
Minification
------------
Invoke Webpack with `-p` for production builds. In Webpack 2, this also automatically sets `process.env.NODE_ENV === 'production'`.
```js
webpack -p
```
Multiple bundles
----------------
Export multiple bundles by setting the output to `[name].js`. This example produces `a.js` and `b.js`.
```js
module.exports = {
entry: {
a: './a',
b: './b'
},
output: { filename: '[name].js' }
}
```
Concerned about duplication? Use the [CommonsChunkPlugin](https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin) to move the common parts into a new output file.
```js
plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]
```
```html
```
Split app and vendor code
-------------------------
Use CommonsChunkPlugin to move vendor code into `vendor.js`.
```js
var webpack = require('webpack')
module.exports = {
entry: {
app: './app.js',
vendor: ['jquery', 'underscore', ...]
},
output: {
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor')
]
}
```
How this works:
- We make a `vendor` entry point and load it with some libraries
- CommonsChunkPlugin will remove these libraries from `app.js` (because it appears in 2 bundles now)
- CommonsChunkPlugin also moves the Webpack runtime into `vendor.js`
> Reference: [Code splitting](https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code)
Source maps (Webpack 1)
-----------------------
The best source maps option is `cheap-module-eval-source-map`. This shows original source files in Chrome/Firefox dev tools. It's faster than `source-map` and `eval-source-map`.
```js
// Webpack 1 only
const DEBUG = process.env.NODE_ENV !== 'production'
module.exports = {
debug: DEBUG ? true : false,
devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}
```
Your files will now show up in Chrome Devtools as `webpack:///foo.js?a93h`. We want this to be cleaner like `webpack:///path/to/foo.js`.
```js
output: {
devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
}
```
> Reference: [devtool documentation](https://webpack.github.io/docs/configuration.html#devtool)
Source maps (Webpack 2-3)
-------------------------
The best source maps option is `cheap-module-source-map`. The cheap-module-eval-source-map strategy no longer shows correct traces in Chrome/Firefox.
```js
// Webpack 2 only
const DEBUG = process.env.NODE_ENV !== 'production'
module.exports = {
devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
}
```
If you're using [extract-text-webpack-plugin](https://www.npmjs.com/package/extract-text-webpack-plugin), use `'source-map'` instead. CSS sourcemaps won't work otherwise.
```js
// Only if you're using extract-text-webpack-plugin
module.exports = {
devtool: DEBUG ? 'source-map' : 'hidden-source-map'
}
```
Your files will now show up in Chrome Devtools as `webpack:///foo.js?a93h`. We want this to be cleaner like `webpack:///path/to/foo.js`.
```js
output: {
devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
}
```
> Reference: [devtool documentation](https://webpack.js.org/configuration/devtool/#devtool)
Output CSS files
----------------
This is complicated, and the guide [can be found here](recipes/css.md).
Development mode
----------------
Want to have certain options only appear in development mode?
```js
const DEBUG = process.env.NODE_ENV !== 'production'
// Webpack 1
module.exports = {
debug: DEBUG ? true : false,
devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}
// Webpack 2
module.exports = {
devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
}
```
__Webpack 1:__ Be sure to invoke Webpack as `env NODE_ENV=production webpack -p` when building your production assets.
__Webpack 2:__ Invoke Webpack as `webpack -p` when building your production assets. `NODE_ENV` is automatically set by Webpack.
Investigating bundle sizes
--------------------------
Want to see what dependencies are the largest? You can use webpack-bundle-size-analyzer.
```js
$ yarn global add webpack-bundle-size-analyzer
$ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer
jquery: 260.93 KB (37.1%)
moment: 137.34 KB (19.5%)
parsleyjs: 87.88 KB (12.5%)
bootstrap-sass: 68.07 KB (9.68%)
...
```
If you're generating source maps (you should), you can also use source-map-explorer, which also works outside of Webpack.
```js
$ yarn global add source-map-explorer
$ source-map-explorer bundle.min.js bundle.min.js.map
```
> Reference: [webpack-bundle-size-analyzer](https://github.com/robertknight/webpack-bundle-size-analyzer), [source-map-explorer](https://www.npmjs.com/package/source-map-explorer)
Smaller React
-------------
React will build dev tools by default. You don't need this in production. Use the EnvironmentPlugin to make these dev tools disappear. This saves you around 30kb.
```js
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development'
})
]
```
__Webpack 1:__ Be sure to invoke Webpack as `env NODE_ENV=production webpack -p` when building your production assets.
__Webpack 2:__ Invoke Webpack as `webpack -p` when building your production assets. `NODE_ENV` is automatically set by Webpack.
> Reference: [EnvironmentPlugin documentation](https://webpack.js.org/plugins/environment-plugin/)
Smaller Lodash
--------------
[Lodash](https://lodash.com/) is very useful but usually we only need a small part of its full functionality. [lodash-webpack-plugin](https://github.com/lodash/lodash-webpack-plugin) can help you shrink the lodash build by replacing [feature sets](https://github.com/lodash/lodash-webpack-plugin#feature-sets) of modules with [noop](https://lodash.com/docs#noop), [identity](https://lodash.com/docs#identity), or simpler alternatives.
```js
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const config = {
plugins: [
new LodashModuleReplacementPlugin({
path: true,
flattening: true
})
]
};
```
This may save you >10kb depending on how much you use lodash.
Requiring all files in a folder
-------------------------------
Ever wanted to do this?
```js
require('./behaviors/*') /* Doesn't work! */
```
Use require.context.
```js
// http://stackoverflow.com/a/30652110/873870
function requireAll (r) { r.keys().forEach(r) }
requireAll(require.context('./behaviors/', true, /\.js$/))
```
> Reference: [require.context](http://webpack.github.io/docs/context.html#require-context)
Clean up extract-text-webpack-plugin log
----------------------------------------
If you're seeing this in your debug log when using [extract-text-webpack-plugin](https://www.npmjs.com/package/extract-text-webpack-plugin):
```
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
```
Turn it off using `stats: { children: false }`.
```js
/* webpack.config.js */
stats: {
children: false,
},
```
> Reference: [extract-text-webpack-plugin#35](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/35)