{"id":15065730,"url":"https://github.com/jneidel/setup-webpack","last_synced_at":"2026-01-02T15:43:02.764Z","repository":{"id":57357106,"uuid":"123740276","full_name":"jneidel/setup-webpack","owner":"jneidel","description":"Opinionated module of webpack plugins and loaders for simplified setup","archived":false,"fork":false,"pushed_at":"2023-02-06T10:33:03.000Z","size":192,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T12:16:48.211Z","etag":null,"topics":["node-module","webpack","webpack-boilerplate","webpack-configuration","webpack3","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jneidel.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}},"created_at":"2018-03-03T23:30:47.000Z","updated_at":"2022-01-13T12:14:10.000Z","dependencies_parsed_at":"2023-02-19T06:31:33.056Z","dependency_job_id":null,"html_url":"https://github.com/jneidel/setup-webpack","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jneidel%2Fsetup-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jneidel%2Fsetup-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jneidel%2Fsetup-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jneidel%2Fsetup-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jneidel","download_url":"https://codeload.github.com/jneidel/setup-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725637,"owners_count":20337670,"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":["node-module","webpack","webpack-boilerplate","webpack-configuration","webpack3","webpack4"],"created_at":"2024-09-25T00:46:46.401Z","updated_at":"2026-01-02T15:43:02.736Z","avatar_url":"https://github.com/jneidel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# setup-webpack\n\n\u003e Opinionated module of webpack loaders/plugins for simplified usage with examples for common use cases\n\nReduce boilerplate when creating your webpack config and keep your package.json slim.\n\nIncludes abstractions for transforming scss and pug, transpiling and polyfilling your javascript, minfication and reloading the browser on changes. All usage patterns are described with clear examples.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTable of Contents\u003c/strong\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Webpack version](#webpack-version)\n- [Usage](#usage)\n- [Examples](#examples)\n  * [Transform scss into css](#transform-scss-into-css)\n  * [Transform pug into html](#transform-pug-into-html)\n  * [Transform markdown into html](#transform-markdown-into-html)\n  * [Minify and transpile ES6 JavaScript](#minify-and-transpile-es6-javascript)\n  * [Reload browser on file changes](#reload-browser-on-file-changes)\n  * [Differentiate between development and production env](#differentiate-between-development-and-production-env)\n  * [Generating more than one output file](#generating-more-than-one-output-file)\n- [API](#api)\n  * [babel](#babel)\n  * [polyfill( path )](#polyfill-path-)\n  * [genScss( path )](#genscss-path-)\n  * [pug( path, [data] )](#pug-path-data-)\n  * [img( directory )](#img-directory-)\n  * [md( path, [gfm, style, border, js] )](#md-path-gfm-style-border-js-)\n  * [browserSync( [proxy, port] )](#browsersync-proxy-port-)\n- [Changelog](#changelog)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## Install\n\n[![](https://img.shields.io/npm/v/setup-webpack.svg?style=flat-square)](https://www.npmjs.com/package/setup-webpack)\n[![](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](https://github.com/jneidel/setup-webpack/blob/master/licence)\n\n```\n$ npm install setup-webpack\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eUpgrade to version \u003ccode\u003ev2\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nVersion `v2` upgrades webpack to `v4`, introducing a few breaking changes:\n\n**Require `mode`:**\n\nEither `development` or `production`.\n\n```js\n{\n  mode: \"production\",\n}\n```\n\n**Rename `loaders` field to `rules`:**\n\n`v1`:\n\n```js\n{\n  module: {\n    loaders: [ babel, ... ]\n  }\n}\n```\n\n`v2`:\n\n```js\n{\n  module: {\n    rules: [ babel, ... ]\n  }\n}\n```\n\n**Deprecate `uglify`:**\n\nThis deprecates the `uglify` plugin, as it is included in using `optimization.minimize = true`.\n\n`v1`:\n\n```js\n{\n  plugins: [ uglify ]\n}\n```\n\n`v2`:\n\n```js\n{\n  optimization: {\n    minimize : true\n  }\n}\n```\n\n**Change `genPug` to `pug`:**\n\n`v1`:\n\n```js\nconst pug = genPug( \"index.html\" );\n\n{\n  module: {\n    loaders: [ pug.loader ]\n  },\n  plugins: [ pug.plugin ]\n}\n```\n\n`v2`:\n\n```js\n{\n  module: {\n    rules: [ pug( \"index.html\" ) ]\n  }\n}\n```\n\n**Change `genScss` syntax:**\n\n`v1`:\n\n```js\nconst scss = genPug( \"styles.css\" );\n\n{\n  module: {\n    loaders: [ scss.loader ]\n  },\n  plugins: [ scss.plugin ]\n}\n```\n\n`v2`:\n\n```js\n{\n  module: {\n    rules: [ scss.rule ]\n  },\n  plugins: [ scss.plugin ]\n  optimization: {\n    minimizer: [ scss.minimizer ],\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eUpgrade to version \u003ccode\u003ev3\u003c/code\u003e\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nVersion `v3` upgrades webpack to `v5`, introducing no breaking changes!\n\n\u003c/details\u003e\n\n## Webpack version\n\nThis package uses: [![](https://img.shields.io/badge/webpack-v5.75.0-blue.svg?style=flat-square)](https://github.com/webpack/webpack)\n\nThe latest webpack is: [![](https://img.shields.io/npm/v/webpack.svg?style=flat-square)](https://www.npmjs.com/package/webpack)\n\n## Usage\n\n**webpack.config.js:**\n\n```js\nconst { babel, polyfill, browserSync, pug, genScss, img } = require( \"setup-webpack\" );\n\nconst sync = browserSync( 8000, 8080 );\n\nconst scss = genScss( \"app.css\" );\n\nmodule.exports = {\n  mode  : \"production\",\n  entry : polyfill( \"./app.bundle.js\" ),\n  output: {\n    path    : path.resolve( __dirname, \"build\" ),\n    filename: \"app.js\",\n  },\n  module: {\n    rules: [ babel, pug( \"app.html\" ), scss.rule, scss.font, img( \"img/\" ) ],\n  },\n  plugins: [ scss.plugin, sync ],\n  optimization: {\n    minimize: true,\n    minimizer: [ scss.minimizer ],\n  },\n};\n```\n\n## Examples\n\nFor a real-life example see [my personal websites config](https://github.com/jneidel/jneidel.com/blob/master/webpack.config.js).\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eGet up to speed with webpack\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr\u003e\n\nThe default config location is in the root of the project, in a file named `webpack.config.js`.\n\nThe files to transpile are `require`d or `import`ed into a single bundle file:\n\n**app.bundle.js:**\n\n```js\nrequire( \"./js/app\" );\nrequire( \"./js/global-variables\" );\nrequire( \"axios\" );\n\nrequire( \"./scss/base-styles.scss\" );\nrequire( \"./scss/app.scss\" );\n\nrequire( \"./pug/app.pug\" );\n```\n\nThe bundle file will serve as an entry point for webpack, which will then split up the different file types again. Files of the same type (eg: `.js`) will be bundled into a single output file.\n\n**webpack.config.js:**\n\n```js\nconst path = require( \"path\" );\nconst { pug, genScss } = require( \"setup-webpack\" );\n\nconst scss = genScss( \"styles.css\" ); // Set output path for css file\n\nmodule.exports = {\n  mode : \"development\", // Run webpack either on 'development' or 'production' mode\n  entry: \"./app.bundle.js\", // Entry file that will be loaded into webpack,\n  output: {                 // will be a bundle in our case\n    path: path.resolve( __dirname, \"build\" ) // Specifies the output path for all files\n    filename: \"scripts.js\", // Name of the main file to be exported, which\n  },                        // will even be exported if no js files are being imported\n  module: {\n    rules: [\n      scss.rule, // Extract scss and turn it into css\n      pug( \"index.html\" ) // Extract pug, turn into html and save to path\n    ]\n  },\n  plugins: [ scss.plugin ] // Save css to above specified path\n  optimization: { // Production optimizations\n    minimize: true, // Minimize js\n    minimizer: [ scss.minimizer ], // Minimize css\n  },\n};\n```\n\n**Required in every config:**\n\n- `mode`\n- `entry`\n- `output`\n    - `output.path`\n    - `output.filename`\n\nFor a more in-depth intro, check out the [webpack docs](https://webpack.js.org/guides/getting-started/).\n\n\u003c/details\u003e\n\nAll examples can be found in the [`examples/webpack`](examples/webpack) folder.\n\nClone the repo to run the examples:\n\n```\n$ git clone https://github.com/jneidel/setup-webpack.git\n```\n\n### Transform scss into css\n\nTransform [scss](https://sass-lang.com/) or (sass) files to css.\n\nView commented example at [`examples/webpack/scss.js`](examples/webpack/scss.js).\n\nTo import [local fonts](#genscss-path-) and [local images](#img-directory-) check out the corresponding API docs.\n\n### Transform pug into html\n\nTransform [pug](https://github.com/pugjs/pug) to html.\n\nView example at [`examples/webpack/pug.js`](examples/webpack/pug.js).\n\nTo import [local images](#img-directory-) check out the corresponding API docs.\n\n### Transform markdown into html\n\nTransform markdown to html, applying GFM styles.\n\nView example at [`examples/webpack/md.js`](examples/webpack/md.js).\n\n### Minify and transpile ES6 JavaScript\n\nReduce file size minify your code and, for compatibility with older browsers, polyfill and transpile ES6+ using babel.\n\nView working commented example at [`examples/webpack/prod.js`](examples/webpack/prod.js).\n\nBecause this process takes some time, you only want to run this in a production environment and not during development.\n\n- [What is Babel](https://babeljs.io/docs/en)\n- [Minify](https://github.com/babel/minify)\n- [Polyfill](https://babeljs.io/docs/en/babel-polyfill.html) [preset-env](https://babeljs.io/docs/en/babel-preset-env.html)\n\n### Reload browser on file changes\n\nAny changes to the files included in the bundle will cause the project to be rebuild and the browser to reload.\n\nView example at [`examples/webpack/sync.js`](examples/webpack/sync.js).\n\nThe script has to run webpack in watch (-w) mode in order for browser-sync to be triggered once the project has been rebuilt.\n\n```zsh\n$ webpack -w\n```\n\nRunning this command in your terminal will require you to install the webpack-cli, to make use of the local installation use the command in a npm script.\n\n```\n\"scripts\": {\n  \"watch\": \"webpack -w\"\n}\n```\n\n### Differentiate between development and production env\n\nMinification and transpiling will only be triggered by environment variables that indicate a production environment.\n\nView working example at [`examples/webpack/env.js`](examples/webpack/env.js).\n\n### Generating more than one output file\n\nView example at [`examples/webpack/complete.js`](examples/webpack/complete.js).\n\nFor each `require` in the entry file, this webpack config will output a transpiled file. If multiple files of the same type are `require`d they will be bundled together in a single output file, making it easier for you to import them into your html document and edit their contents.\n\nIf no files of a specific type `js|scss|pug` are `require`d in, webpack will simply not generate an output file of that type. Only the `*.bundle.js` file is necessary for the build to complete.\n\n## API\n\nCherry-pick the parts that you need using object destructuring:\n\n```js\nconst { babel, pug, genScss } = require( \"setup-webpack\" );\n```\n\n### babel\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003ccode\u003eobject\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003ccode\u003epath\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003ccode\u003erule\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003ca href=\"examples/webpack/prod.js\"\u003e\u003ccode\u003eprod\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/env.js\"\u003e\u003ccode\u003eenv\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/complete.js\"\u003e\u003ccode\u003ecomplete\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nThis loader transpiles ES6+ javascript for older browsers ([more on babel](https://babeljs.io/)) and minifies contents (shrinks down files, removing whitespace, redundant characters, [more on minify](https://babeljs.io/blog/2016/08/30/babili)).\n\nUses the [env](https://babeljs.io/docs/plugins/preset-env/) preset as well the [minifier](https://github.com/babel/minify) as options.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [ babel ]\n  }\n}\n```\n\nUses [babel-loader](https://www.npmjs.com/package/babel-loader), [babel-preset-env](https://www.npmjs.com/package/babel-preset-env), [babel-minify-webpack-plugin](https://www.npmjs.com/package/babel-minify-webpack-plugin), [babel-core](https://www.npmjs.com/package/babel-core) under the hood.\n\n### polyfill( path )\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003ccode\u003epath\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003ccode\u003eentry\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003ca href=\"examples/webpack/prod.js\"\u003e\u003ccode\u003eprod\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/complete.js\"\u003e\u003ccode\u003ecomplete\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nPolyfills functions and methods not yet available in all browsers. For more information see [polyfill](https://babeljs.io/docs/usage/polyfill/).\n\n```js\nmodule.exports = {\n  entry: polyfill( \"./bundle.js\" )\n}\n```\n\n**path:**\n\nPath to entry point bundle, which requires the code to be build.\n\nUses [babel-polyfill](https://www.npmjs.com/package/babel-polyfill) under the hood.\n\n### genScss( path )\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003cbr\u003e\u003ccode\u003efunction\u003c/code\u003e, \u003ccode\u003egenerator\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003cbr\u003e\u003ccode\u003epath\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003cbr\u003e\u003ccode\u003e{ rule, plugin, minimizer, font }\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003cbr\u003e\u003ca href=\"examples/webpack/scss.js\"\u003e\u003ccode\u003escss\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/env.js\"\u003e\u003ccode\u003eenv\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/complete.js\"\u003e\u003ccode\u003ecomplete\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/font.js\"\u003e\u003ccode\u003efont\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nTranspiles scss code in the entry file into css and writes the file to the given path.\n\nFunction generates a webpack rule, plugin and minimizer:\n\n```js\nconst scss = genScss( \"app.css\" );\n\nmodule.exports = {\n  output: {\n    path: path.resolve( __dirname, \"build\" ),\n  },\n  module: {\n    rules: [ scss.rule ],\n  },\n  plugins: [ scss.plugin ],\n  optimization: {\n    minimizer: [ scss.minimizer ],\n  },\n}\n\n//=\u003e Saved as build/app.css\n```\n\n**font:**\n\n`genScss` also generates includes `scss.font`, which is a rule that should be included if you're importing local font files within your sass.\n\n```js\n{\n  module: {\n    rules: [ scss.rule, scss.font ]\n  }\n}\n```\n\nUses [sass](https://www.npmjs.com/package/sass), [mini-css-extract-plugin](https://www.npmjs.com/package/mini-css-extract-plugin), [sass-loader](https://www.npmjs.com/package/sass-loader), [css-loader](https://www.npmjs.com/package/), [optimize-css-assets-webpack-plugin](https://www.npmjs.com/package/), [file-loader](https://www.npmjs.com/package/file-loader) under the hood.\n\n### pug( path, [data] )\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003ccode\u003epath\u003c/code\u003e, \u003ccode\u003edata\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003ccode\u003erule\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003ca href=\"examples/webpack/pug.js\"\u003e\u003ccode\u003epug\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/pug-data.js\"\u003e\u003ccode\u003epug-data\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/complete.js\"\u003e\u003ccode\u003ecomplete\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nTranspiles pug code in the entry file into html and writes the file to the given path.\n\n```js\nmodule.exports = {\n  output: {\n    path: path.resolve( __dirname, \"build\" ),\n  },\n  module: {\n    rules: [ pug( \"./index.html\" ), { headline: \"Headline Content\" } ],\n  },\n}\n\n//=\u003e Saved as build/index.html\n```\n\n**path**\n\nOutput path of the html file.\n\n```\npug( \"./index.html\" )\n```\n\n**[data]**\n\nData to be passed to pug. In pug available as javascript variables.\n\n```\npug( \"./index.html\", { place: \"Berlin\", time: Data.now() } )\n```\n\nUses [pug-html-loader](https://www.npmjs.com/package/pug-html-loader), [html-loader](https://www.npmjs.com/package/html-loader), [extract-loader](https://www.npmjs.com/package/extract-loader), [file-loader](https://www.npmjs.com/package/) under the hood.\n\n### img( directory )\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003ccode\u003edirectory\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003ccode\u003erule\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003ca href=\"examples/webpack/img.js\"\u003e\u003ccode\u003eimg\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nThis loader should only be used if you import local images in your pug or scss code.\n\nUnlike the other loaders, this one only takes a directory, not a full path. The filename/extension will be copied over from the original, to not mix up different images.\n\n```js\nmodule.exports = {\n  output: {\n    path: path.resolve( __dirname, \"build\" ),\n  },\n  module: {\n    rules: [ img( \"./img\" ) ],\n  },\n}\n\n//=\u003e Saved as build/img/[name].[ext]\n```\n\nUses [file-loader](https://www.npmjs.com/package/) under the hood.\n\n### md( path, [gfm, style, border, js] )\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003ccode\u003epath\u003c/code\u003e, \u003ccode\u003egfm\u003c/code\u003e, \u003ccode\u003estyle\u003c/code\u003e, \u003ccode\u003eborder\u003c/code\u003e, \u003ccode\u003ejs\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003ccode\u003erule\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003ca href=\"examples/webpack/md.js\"\u003e\u003ccode\u003emd\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nTranspile `require`d markdown files into html. GFM (github flavored markdown) styles are applied.\n\n```js\nmodule.exports = {\n  output: {\n    path: path.resolve( __dirname, \"build\" ),\n  },\n  module: {\n    rules: [ md( \"./docs.html\" ) ],\n  },\n}\n\n//=\u003e Saved as build/docs.html\n```\n\n**path:**\n\nOutput path for the html file.\n\n```js\nmd( \"docs.html\" )\n```\n\n**gfm:**\n\nDefault: [sindresorhus/github-markdown-css](https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css)\n\n`href` that will be set as stylesheet source for applying the gfm styles.\n\n```js\nmd( \"docs.html\", \"gfm.css\" )\n```\n\n**style:**\n\n`href` for an additional stylesheet.\nTo customize the gfm styles.\n\n```js\nmd( \"docs.html\", \"gfm.css\", \"custom.css\" )\n```\n\n**border:**\n\nPass `true` to add a Github styled border around the `\u003cbody\u003e`. See source module for rendered example: [jneidel/gfm-loader](https://github.com/jneidel/gfm-loader#example).\n\n```js\nmd( \"docs.html\", \"gfm.css\", \"custom.css\", true )\n```\n\n**js:**\n\n`src` for an additional script file.\n\n```js\nmd( \"docs.html\", null, \"custom.css\", null, \"custom.js\" )\n```\n\nUses [markdown-loader](https://www.npmjs.com/package/markdown-loader), [html-loader](https://www.npmjs.com/package/html-loader), [extract-loader](https://www.npmjs.com/package/extract-loader), [gfm-loader](https://www.npmjs.com/package/gfm-loader), [file-loader](https://www.npmjs.com/package/) under the hood.\n\n### browserSync( [proxy, port] )\n\n\u003ctable\u003e\u003ctr\u003e\n  \u003ctd\u003eType: \u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eParam: \u003ccode\u003eproxy\u003c/code\u003e, \u003ccode\u003eport\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eReturn: \u003ccode\u003eplugin\u003c/code\u003e\u003c/td\u003e\n  \u003ctd\u003eExamples: \u003ca href=\"examples/webpack/sync.js\"\u003e\u003ccode\u003esync\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/env.js\"\u003e\u003ccode\u003eenv\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"examples/webpack/complete.js\"\u003e\u003ccode\u003ecomplete\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\nReloads brower windows connected on a given port, after webpack has rebuilt.\n\nThe proxy as well as the port are using localhost.\n\n**proxy:**\n\nOptional\n\nType: `number`\n\nDefault: `8000`\n\nDescribes the port your server/app is running on.\n\n**port:**\n\nOptional\n\nType: `number`\n\nDefault: `8080`\n\nDescribes the port which browser-sync will be running on. Only browser windows connected to this port will be reloaded.\n\n**Without a server:**\n\nCurrently not supported in this module, but can be easily done using the browser-sync-cli:\n\nIn your npm package.json:\n\n```json\n\"scripts\": {\n  \"build\": \"webpack -w\",\n  \"sync\": \"browser-sync --server --files [ 'dist' ]\", // Files/dirs to watch for changes\n  \"watch\": \"concurrently 'npm run build' 'npm run sync' --names '📦,🔄' --prefix name\",\n}\n```\n\nThis script requires the global installation of [`concurrently`](https://www.npmjs.com/package/concurrently).\n\nUses [browser-sync](https://www.npmjs.com/package/browser-sync), [browser-sync-webpack-plugin](https://www.npmjs.com/package/browser-sync-webpack-plugin) under the hood.\n\n## Changelog\n\n**2.5.3:**\n\n- Add `md` parameter (`js`)\n\n**2.3.0:**\n\n- Add `md` parameters (`style`, `border`)\n\n**Previous:**\n\nFor upgrading to `2.x` see [install](#install).\n\n## License\n\nMIT © [Jonathan Neidel](https://github.com/jneidel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjneidel%2Fsetup-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjneidel%2Fsetup-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjneidel%2Fsetup-webpack/lists"}