{"id":13562425,"url":"https://github.com/rstacruz/webpack-tricks","last_synced_at":"2025-05-15T17:08:44.535Z","repository":{"id":66010366,"uuid":"77031573","full_name":"rstacruz/webpack-tricks","owner":"rstacruz","description":"Tips and tricks in using Webpack","archived":false,"fork":false,"pushed_at":"2022-01-18T08:57:37.000Z","size":22,"stargazers_count":2346,"open_issues_count":4,"forks_count":61,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-03-31T21:49:26.398Z","etag":null,"topics":["javascript","minification","react","split","webpack"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rstacruz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-12-21T08:10:41.000Z","updated_at":"2025-03-20T06:37:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"619d05aa-c510-4fba-abcc-1f6b74ffc916","html_url":"https://github.com/rstacruz/webpack-tricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fwebpack-tricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fwebpack-tricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fwebpack-tricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fwebpack-tricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstacruz","download_url":"https://codeload.github.com/rstacruz/webpack-tricks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737788,"owners_count":20987721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","minification","react","split","webpack"],"created_at":"2024-08-01T13:01:08.472Z","updated_at":"2025-04-07T22:10:11.832Z","avatar_url":"https://github.com/rstacruz.png","language":null,"readme":"# Webpack tricks\n\nJust a small catalog of Webpack tips and tricks I've learned. These tricks work with Webpack v3 unless otherwise specified.\n\nTable of contents\n-----------------\n\n  * [Progress reporting](#progress-reporting)\n  * [Minification](#minification)\n  * [Multiple bundles](#multiple-bundles)\n  * [Split app and vendor code](#split-app-and-vendor-code)\n  * [Source maps (Webpack 1)](#source-maps-webpack-1)\n  * [Source maps (Webpack 2-3)](#source-maps-webpack-2-3)\n  * [Output CSS files](#output-css-files)\n  * [Development mode](#development-mode)\n  * [Investigating bundle sizes](#investigating-bundle-sizes)\n  * [Smaller React](#smaller-react)\n  * [Smaller Lodash](#smaller-lodash)\n  * [Requiring all files in a folder](#requiring-all-files-in-a-folder)\n  * [Clean up extract-text-webpack-plugin log](#clean-up-extract-text-webpack-plugin-log)\n\nProgress reporting\n------------------\n\nInvoke Webpack with:\n\n```\n--progress --colors\n```\n\nMinification\n------------\n\nInvoke Webpack with `-p` for production builds. In Webpack 2, this also automatically sets `process.env.NODE_ENV === 'production'`.\n\n```js\nwebpack -p\n```\n\nMultiple bundles\n----------------\n\nExport multiple bundles by setting the output to `[name].js`. This example produces `a.js` and `b.js`.\n\n```js\nmodule.exports = {\n  entry: {\n    a: './a',\n    b: './b'\n  },\n  output: { filename: '[name].js' }\n}\n```\n\nConcerned 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.\n\n```js\nplugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]\n```\n\n```html\n\u003cscript src='init.js'\u003e\u003c/script\u003e\n\u003cscript src='a.js'\u003e\u003c/script\u003e\n```\n\nSplit app and vendor code\n-------------------------\n\nUse CommonsChunkPlugin to move vendor code into `vendor.js`.\n\n```js\nvar webpack = require('webpack')\n\nmodule.exports = {\n  entry: {\n    app: './app.js',\n    vendor: ['jquery', 'underscore', ...]\n  },\n\n  output: {\n    filename: '[name].js'\n  },\n\n  plugins: [\n    new webpack.optimize.CommonsChunkPlugin('vendor')\n  ]\n}\n```\n\nHow this works:\n\n- We make a `vendor` entry point and load it with some libraries\n- CommonsChunkPlugin will remove these libraries from `app.js` (because it appears in 2 bundles now)\n- CommonsChunkPlugin also moves the Webpack runtime into `vendor.js`\n\n\u003e Reference: [Code splitting](https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code)\n\nSource maps (Webpack 1)\n-----------------------\n\nThe 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`.\n\n```js\n// Webpack 1 only\nconst DEBUG = process.env.NODE_ENV !== 'production'\n\nmodule.exports = {\n  debug: DEBUG ? true : false,\n  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'\n}\n```\n\nYour 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`.\n\n```js\noutput: {\n\tdevtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'\n}\n```\n\n\u003e Reference: [devtool documentation](https://webpack.github.io/docs/configuration.html#devtool)\n\nSource maps (Webpack 2-3)\n-------------------------\n\nThe best source maps option is `cheap-module-source-map`. The cheap-module-eval-source-map strategy no longer shows correct traces in Chrome/Firefox.\n\n```js\n// Webpack 2 only\nconst DEBUG = process.env.NODE_ENV !== 'production'\n\nmodule.exports = {\n  devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'\n}\n```\n\nIf 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.\n\n```js\n// Only if you're using extract-text-webpack-plugin\nmodule.exports = {\n  devtool: DEBUG ? 'source-map' : 'hidden-source-map'\n}\n```\n\nYour 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`.\n\n```js\noutput: {\n  devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'\n}\n```\n\n\u003e Reference: [devtool documentation](https://webpack.js.org/configuration/devtool/#devtool)\n\nOutput CSS files\n----------------\n\nThis is complicated, and the guide [can be found here](recipes/css.md).\n\nDevelopment mode\n----------------\n\nWant to have certain options only appear in development mode?\n\n```js\nconst DEBUG = process.env.NODE_ENV !== 'production'\n\n// Webpack 1\nmodule.exports = {\n  debug: DEBUG ? true : false,\n  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'\n}\n\n// Webpack 2\nmodule.exports = {\n  devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'\n}\n```\n\n__Webpack 1:__ Be sure to invoke Webpack as `env NODE_ENV=production webpack -p` when building your production assets.\n\n__Webpack 2:__ Invoke Webpack as `webpack -p` when building your production assets. `NODE_ENV` is automatically set by Webpack.\n\nInvestigating bundle sizes\n--------------------------\n\nWant to see what dependencies are the largest? You can use webpack-bundle-size-analyzer.\n\n```js\n$ yarn global add webpack-bundle-size-analyzer\n\n$ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer\njquery: 260.93 KB (37.1%)\nmoment: 137.34 KB (19.5%)\nparsleyjs: 87.88 KB (12.5%)\nbootstrap-sass: 68.07 KB (9.68%)\n...\n```\n\nIf you're generating source maps (you should), you can also use source-map-explorer, which also works outside of Webpack.\n\n```js\n$ yarn global add source-map-explorer\n\n$ source-map-explorer bundle.min.js bundle.min.js.map\n```\n\n\u003e Reference: [webpack-bundle-size-analyzer](https://github.com/robertknight/webpack-bundle-size-analyzer), [source-map-explorer](https://www.npmjs.com/package/source-map-explorer)\n\nSmaller React\n-------------\n\nReact 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.\n\n```js\nplugins: [\n  new webpack.EnvironmentPlugin({\n    NODE_ENV: 'development'\n  })\n]\n```\n\n__Webpack 1:__ Be sure to invoke Webpack as `env NODE_ENV=production webpack -p` when building your production assets.\n\n__Webpack 2:__ Invoke Webpack as `webpack -p` when building your production assets. `NODE_ENV` is automatically set by Webpack.\n\n\u003e Reference: [EnvironmentPlugin documentation](https://webpack.js.org/plugins/environment-plugin/)\n\nSmaller Lodash\n--------------\n\n[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.\n\n```js\nconst LodashModuleReplacementPlugin = require('lodash-webpack-plugin');\n\nconst config = {\n  plugins: [\n    new LodashModuleReplacementPlugin({\n      path: true,\n      flattening: true\n    })\n  ]\n};\n```\n\nThis may save you \u003e10kb depending on how much you use lodash.\n\nRequiring all files in a folder\n-------------------------------\n\nEver wanted to do this?\n\n```js\nrequire('./behaviors/*')  /* Doesn't work! */\n```\n\nUse require.context.\n\n```js\n// http://stackoverflow.com/a/30652110/873870\nfunction requireAll (r) { r.keys().forEach(r) }\n\nrequireAll(require.context('./behaviors/', true, /\\.js$/))\n```\n\n\u003e Reference: [require.context](http://webpack.github.io/docs/context.html#require-context)\n\nClean up extract-text-webpack-plugin log\n----------------------------------------\n\nIf you're seeing this in your debug log when using [extract-text-webpack-plugin](https://www.npmjs.com/package/extract-text-webpack-plugin):\n\n```\nChild extract-text-webpack-plugin:\n        + 2 hidden modules\nChild extract-text-webpack-plugin:\n        + 2 hidden modules\nChild extract-text-webpack-plugin:\n        + 2 hidden modules\n```\n\nTurn it off using `stats: { children: false }`.\n\n```js\n/* webpack.config.js */\nstats: {\n  children: false,\n},\n```\n\n\u003e Reference: [extract-text-webpack-plugin#35](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/35)\n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstacruz%2Fwebpack-tricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstacruz%2Fwebpack-tricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstacruz%2Fwebpack-tricks/lists"}