{"id":13394751,"url":"https://github.com/HenrikJoreteg/hjs-webpack","last_synced_at":"2025-03-13T20:31:41.143Z","repository":{"id":29229351,"uuid":"32761137","full_name":"HenrikJoreteg/hjs-webpack","owner":"HenrikJoreteg","description":"Helpers/presets for setting up webpack with hotloading react and ES6(2015) using Babel.","archived":false,"fork":false,"pushed_at":"2019-06-28T14:13:42.000Z","size":362,"stargazers_count":1788,"open_issues_count":15,"forks_count":129,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-10-29T15:27:17.016Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/HenrikJoreteg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-03-23T21:56:09.000Z","updated_at":"2024-09-29T10:58:25.000Z","dependencies_parsed_at":"2022-09-05T11:50:24.720Z","dependency_job_id":null,"html_url":"https://github.com/HenrikJoreteg/hjs-webpack","commit_stats":null,"previous_names":[],"tags_count":80,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikJoreteg%2Fhjs-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikJoreteg%2Fhjs-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikJoreteg%2Fhjs-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenrikJoreteg%2Fhjs-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HenrikJoreteg","download_url":"https://codeload.github.com/HenrikJoreteg/hjs-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478188,"owners_count":20297210,"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":[],"created_at":"2024-07-30T17:01:30.395Z","updated_at":"2025-03-13T20:31:40.759Z","avatar_url":"https://github.com/HenrikJoreteg.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# hjs-webpack\n\n[![npm version](https://badge.fury.io/js/hjs-webpack.svg)](https://badge.fury.io/js/hjs-webpack)\n\n\u003e Warning: If you are upgrading across major versions, please read the [release notes in the changelog](./CHANGELOG.md).\n\nI really dislike setting up build scripts. Most of the time I want to do the exact same thing:\n\nWhile developing:\n\n  - easy to setup and run dev server\n  - transpile ES6+, JSX, Stylus code\n  - hotload (a.k.a. live reload) modules when changed\n\nWhen ready to ship:\n\n  - minify and bundle all the things\n  - output minified, uniquely named static files into public directory\n  - be able to generate customized static HTML file(s) used to deliver my JS app\n  - be ready to just upload it all to something like [surge.sh](http://surge.sh/)\n  - sometimes I want to pre-render all known HTML into static HTML files and have React take over once the clientside JS loads.\n\n[webpack](http://webpack.github.io) can do most of those things pretty well out of the box. But, it sure is a pain to set it all up.\n\nSo, this is just a simplified, opinionated way to configure webpack for development and then build for production. That also supports easily generating more files.\n\nIf no one uses it but me, it will have still served its purpose.\n\nA screencast showing how to use this module is here: http://learn.humanjavascript.com/react-ampersand/setting-up-webpack\n\n## install\n\n```\nnpm install hjs-webpack\n```\n\n### Optional dependencies\n\n`hjs-webpack` relies on a number of optional dependencies to add functionality for things like CSS preprocessing, ES2015 transpiling, templates, and plugins. It doesn't make sense to specifiy all the loaders as `peerDependencies` since not every person will want every loader and missing `peerDependencies` cause commands like `npm ls` to error which isn't great.\n\nSo in order to get this additional functionality you should `npm install` the loaders and plugins you want `hjs-webpack` to use. If `hjs-webpack` detects that they are installed, then they will be used automatically without any further configuration.\n\nHere's some more information about the available loaders and plugins and what they each do. You should install each that you want with `npm install --save-dev`.\n\n#### CSS\n\n*Note that all of the CSS loaders and plugins require [`css-loader`](https://www.npmjs.com/package/css-loader) [`postcss-loader`](https://www.npmjs.com/package/postcss-loader) [`style-loader`](https://www.npmjs.com/package/style-loader) to be installed.*\n\n[`less-loader`](https://www.npmjs.com/package/less-loader) Require compiled less files. Extension: `less`.\n\n[`stylus-loader`](https://www.npmjs.com/package/stylus-loader) Require compiled stylus files. Extension: `styl`.\n\n[`sass-loader`](https://www.npmjs.com/package/sass-loader) Require compiled sass files using the regular or indented syntax. Extensions: `sass scss`.\n\n[`yeticss`](https://www.npmjs.com/package/yeticss) A plugin to add the yeticss library as a `stylus` plugin.\n\n[`autoprefixer`](https://www.npmjs.com/package/autoprefixer) A plugin to auto prefix all your CSS with the necessary vendor prefixes.\n\n#### JS/JSX/JSON\n\n[`babel-loader`](https://www.npmjs.com/package/babel-loader) Require transpiled JS with built-in support for ES2015 and JSX. Extensions: `js jsx babel`.\n\n[`coffee-loader`](https://www.npmjs.com/package/coffee-loader) Require CoffeeScript. Extension: `coffee`.\n\n[`cjsx-loader`](https://www.npmjs.com/package/cjsx-loader) Require CoffeeScript with support for JSX. `coffee-loader` must also be installed. Extension: `cjsx`.\n\n[`awesome-typescript-loader`](https://www.npmjs.com/package/awesome-typescript-loader) Require TypeScript. Extension: `ts`.\n\n[`livescript-loader`](https://www.npmjs.com/package/livescript-loader) Require LiveScript. Extension: `ls`.\n\n#### Assets\n\n[`url-loader`](https://www.npmjs.com/package/url-loader) Require assets that return data url if the size is less than the [`urlLoaderLimit`](#urlloaderlimit-optional-number-default-10000). Extensions: `jpg jpeg png gif svg otf eot svg ttf woff`.\n\n[`worker-loader`](https://www.npmjs.com/package/worker-loader) This lets us more easily write code for WebWorkers. Once you `npm install worker-loader` you can write worker code using whatever other transpiler you're using and being able to `require` or `import` code from npm just like you would normally. If this is installed, simply name your file ending in `worker.js` for example `main.worker.js` or even just `worker.js` and it will be loaded as a worker and packaged up as a separate file when built. In addition, `worker-loader` supports inlining the code for workers and loading it as a data-uri as can be seen here: https://github.com/webpack/worker-loader/blob/master/createInlineWorker.js. To use this feature name your file `SOMETHING.thread.js` or just `thread.js` instead and it will be inlined if that feature is supported by the browser running your app (it will fallback to being loaded as a separate file otherwise).\n\n#### Templates\n\n[`pug-loader`](https://www.npmjs.com/package/pug-loader) Require pug files as compiled functions. Extension: `pug` (legacy `jade` also supported).\n\n#### Development\n\n[`visualizer-plugin`](https://github.com/chrisbateman/webpack-visualizer) A plugin to visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates.\n\n## Usage\n\n#### Step 1. install it into your project\n\n```\nnpm install --save hjs-webpack\n```\n\n#### Step 2. create a webpack.config.js\n\nPut it at the root of your project, a typical config looks something like this:\n\n```js\nvar getConfig = require('hjs-webpack')\n\n\nmodule.exports = getConfig({\n  // entry point for the app\n  in: 'src/app.js',\n\n  // Name or full path of output directory\n  // commonly named `www` or `public`. This\n  // is where your fully static site should\n  // end up for simple deployment.\n  out: 'public',\n\n  // This will destroy and re-create your\n  // `out` folder before building so you always\n  // get a fresh folder. Usually you want this\n  // but since it's destructive we make it\n  // false by default\n  clearBeforeBuild: true\n})\n\n```\n\n#### Step 3. configure `scripts` section of package.json\n\nI usually add something like the following scripts:\n\n```\n\"scripts\": {\n  \"start\": \"hjs-dev-server\",\n  \"build\": \"webpack\",\n  \"deploy\": \"npm run build \u0026\u0026 surge -p public -d somedomain.com\"\n}\n```\n\nAssuming you've got some JS written that you've set as your `in` in the `webpack.config.js` you can run `npm start` and open a browser to `http://localhost:3000` and you everything should Just Work™.\n\nWhen you're wanting to do a build, just run `npm run build`. The build will generate your files into `public`.\n\nNow there's a static site in `public` that can be deployed to something like [Surge.sh](http://surge.sh), which I do by running `npm run deploy`.\n\n#### Step 4. Dealing with styles\n\nSince we're using webpack under the hood, this is done the \"webpack way\".\n\nBasically you can `require` your styles as if they were JavaScript files.\n\nSimply do this in your application code:\n\n```\nrequire('./path/to/your/css/main.css')\n```\n\nBe sure to include the extension: `.css` in your require statement. If you use `.styl` you can write [Stylus](https://learnboost.github.io/stylus/) seamlessly and at the top of your stylus files you've got access to [yeti.css](http://yeticss.com/) for easy styling.\n\nTry creating a file called `main.styl` containing:\n\n```css\n@import 'yeticss'\n```\n\nRequire it from your main application file (see `in` section below) and you should get some nice default styles.\n\n**Note** in development mode these will be live-reloaded (hot loaded). In production, these will be extracted into their own files, including intelligent handling of referenced URLs within your stylesheets. Things like font-files and images will be extracted if they're over a certain size. You shouldn't have to worry about this too much. It should just work seamlessly.\n\n#### Step 5. Dealing with images and static files\n\n**Option #1: requiring files**\n\nWebpack lets us do `var url = require('something.png')` from within our app code and `url` is something you can safely set as the `src` of an image tag, for example. When you build the project, it uses the [url-loader](https://github.com/webpack/url-loader) and will base64 encode and inline it if it's smaller than the [urlLoaderLimit](#urlloaderlimit-optional-number-default-10000) and hash and export it otherwise.\n\nWhen you do this, webpack will hash the file and use that as a name. If you basically just want to require a file so webpack knows about it, the following syntax will copy the favicon to the `out` directory (at the root) but leave the name unchanged: `require('!!file?name=favicon.ico!./real/path/to/your/favicon.ico')`. The `!!` at the beginning will tell webpack to ignore other configured loaders so that your favicon won't get base64 encoded by the `url-loader`. See the webpack documentation about [loader order](https://webpack.github.io/docs/loaders.html#loader-order) for more info.\n\nBut, letting webpack handle images isn't always what you want to do. Sometimes you want just a simple folder of static assets and be able to reference them like you're used to. That's why there's another option:\n\n**Option #2: just put 'em in your `out` directory**\n\nYou can also just put your assests in the `out` directory and tell hjs-webpack to ignore them by setting a glob pattern as the  `clearBeforeBuild` option.\n\nAssume an `out` directory called `public` that looks like this:\n\n```\npublic/\n  some-other-generated-file.html\n  index.html\n  yourapp.1.1.1.css\n  yourapp.1.1.1.js\n  favicon.ico\n\n  images/\n    some-pic.png\n\n```\n\nThen, instead of setting `clearBeforeBuild: true` you can set it to a glob string like so: `clearBeforeBuild: '!(images|favicon.ico)'`.\n\nNow when you build it'll clear everything that matches the glob pattern an nothing else.\n\nIn this case, it'd leave the `images` directory and your `favicon.ico` alone (more details in options section below).\n\n**note** The development server will treat the `out` directory as the `contentBase` which means in this case the favicon would be available at `/favicon.ico` despite being in `public`.\n\n## Examples\n\nThere are 3 example projects in the [/examples](https://github.com/HenrikJoreteg/hjs-webpack/tree/master/examples) directory with various config setups:\n\n1. Only generating CSS/JS\n2. Generating CSS/JS and using included HTML template\n3. Pre-rendering app layout and the public homepage HTML with React as part of the build process\n\n## Config options\n\nThe main export you get when you `require('hjs-webpack')` is simply a pre-configured `webpack.config.js`. You could take the result of that and add other plugins if you so chose, but shouldn't be necessary for most common tasks.\n\n### `in`\n\nThis should just be the path to the file that serves as the main entry point of your application.\n\n### `out`\n\nPath to directory where we're going to put generated files.\n\n### `clearBeforeBuild` (optional, boolean or glob string, default=false)\n\nA boolean to specify whether to clear the `out` folder before building.\n\nIf you wish to only clear *some* of this directory you can also pass a [glob string](https://github.com/isaacs/node-glob#glob-primer). Globs are the file path matching strings you've probably seen in on the command line or in a `.gitigore` (i.e. `**/*.js*`).\n\nThe most common thing you'd probably want to do while using this module would be to exclude a directory from being cleared. The following example would clear out the `public` directory but leave the `public/images` and `public/static` folders intact if they exist.\n\n```\ngetConfig({\n  in: 'src/app.js',\n  out: 'public',\n  clearBeforeBuild: '!(images|static)'\n})\n\n```\n\nSo, just to be clear, everything that matches the glob string *within* the out folder will be deleted when building.\n\n### `isDev` (optional, boolean, default=varies based on command)\n\nA boolean to indicate whether or not everything is in production mode (minified, etc.) or development mode (everything hotloaded and unminified).\n\nBy default this value is `true` if the command you ran contains `hjs-dev-server` and `false` otherwise. The option exists here in case you need to override the default.\n\n### `devtool` (optional, string, default='cheap-module-eval-source-map')\n\nA webpack developer tool to enhance debugging. See [the webpack docs for more options](https://webpack.github.io/docs/configuration.html#devtool).\n\n### `uglify` (optional, object)\n\nOptions passed directly to the [`UglifyJSPlugin`](https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin). Only used if `isDev` is `false`. Default:\n\n```js\n{\n  compress: { warnings: false },\n  output: { comments: false },\n  sourceMap: false\n}\n```\n\n### `output.filename` (optional, string)\n\nThis is passed directly to `webpack`, so you can use all the [configuration options available there](https://github.com/webpack/docs/wiki/configuration#outputfilename).\n\nBy default a filename is created for you based on the following rules:\n\n- If `isDev` is `true`, then the filename is `app.js`\n- If `isDev` is `false`, then the filename `NAME.VERSION.js` where `NAME` and `VERSION` are pulled from your `package.json` file\n- If `output.hash` is true, then instead of `VERSION` your filename will contain the `HASH` of the compiled file\n\n### `output.cssFilename` (optional, string)\n\nThis is passed directly to the `extract-text-webpack-plugin`, so you can use all the [configuration options available there](https://github.com/webpack/extract-text-webpack-plugin#api). Note: this is only used if `isDev` is `true`, since in development mode the css bundle is inserted dynamically into the document by the [`style-loader`](https://github.com/webpack/style-loader).\n\nBy default a filename is created for you based on the following rules:\n\n- If `isDev` is `true`, then the filename is `app.css`\n- If `isDev` is `false`, then the filename `NAME.VERSION.css` where `NAME` and `VERSION` are pulled from your `package.json` file\n- If `output.hash` is true, then instead of `VERSION` your filename will contain the `HASH` of the compiled file\n\n### `output.hash` (optional, boolean, default is `false`)\n\nThis is used in conjunction with the `output.filename` and `output.cssFilename` options above, and is only used if `isDev` is `false`. If `hash` is `true` then the filenames of your JS and CSS files will contain the hash of the compiled file. This is useful to fingerprint your asset files so that they can be cached for as long as possible.\n\n### `urlLoaderLimit` (optional, number, default: `10000`)\n\nThis is the default threshold to use for whether URLs referenced in stylesheets will be inlined or extracted during build (we're just pre-configuring the [url-loader](https://github.com/webpack/url-loader)).\n\n### `devServer` (optional, object)\n\nThese options are passed through to the `hjs-dev-server` with a few defaults. Some of these options are passed directly to [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware), see those docs for all available options.\n\n```js\n{\n  port, // pulled from top level option \"port\"\n  hostname, // // pulled from top level option \"hostname\"\n  historyApiFallback: true,\n  hot: true,\n  compress: true, // enable express compression to faster index reload (default: false)\n  // The following options are for webpack-dev-middleware\n  noInfo: true,\n  quiet: false,\n  lazy: false,\n  publicPath // pulled from top level option \"output.publicPath\"\n}\n```\n\n### `https` (optional, boolean, default: `false`)\n\nThis is used to start `hjs-dev-server` with its self signed certificate, so you can load the application with an https url.  It also configures hot module replacement to also use https.\n\n### `replace` (optional, object)\n\nYou can supply an object of require names with paths to the files you want that name to represent. This makes it easy to do things like swapping out config files based on build mode, etc.\n\nAdding this to your config would mean that any time you did: `require('config')` within your application code, you'd end up with the file specified by the path.\n\n```js\n{\n  'config': '/some/path/config.json'\n}\n```\n\n### `html` (optional, can be boolean or function)\n\nThis option is `true` by default. This means, by default, we'll serve and generate a very basic HTML file that looks like this:\n\n```html\n\u003c!doctype html\u003e\n\u003cmeta charset=\"utf-8\"/\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/\u003e\n\u003clink rel=\"stylesheet\" href=\"/package-name.1.0.0.css\"/\u003e\n\u003cbody\u003e\u003cdiv id=\"root\"\u003e\u003c/div\u003e\u003cscript src=\"/package-name.1.0.0.js\"\u003e\u003c/script\u003e\u003c/body\u003e\n```\n\nNote the `\u003cmeta charset\u003e` tag and mobile viewport settings are there by default.\n\nThe `\u003cbody\u003e` followed by the main script tag is also intentional. The ordering ensures we don't have to wait for `DOMReady` in our clientside code, you can safely assume that *both* `document.body` and `document.head` will be available when your script executes.\n\nIf you just want to do JS and CSS and handle all the html yourself, simply add `html: false` to your config (see examples directory for example).\n\n**using an `html` function to generate specific files**\n\nThis is where it gets interesting. Imagine pre-rendering all known structural content for a Native Web App to static files. Users get pixels on the screen immediately, your JS takes over when downloaded. If you're using React, this \"taking over\" can be completely seamless and invisible to the user. It's also possible with this approach to write an app that works entirely without JS. See the [prerendered-html-files example](https://github.com/HenrikJoreteg/hjs-webpack/tree/master/examples/prerendered-html-files).\n\nYour function should produce an object.\n\nEach key in the object is a filename, and its value is a string to be written to disc.\n\nIf you simply specify `html: true` it will do the following by default:\n\n```js\nhtml: function (context) {\n  return {\n    'index.html': context.defaultTemplate()\n  }\n}\n```\n\nSo if you want to produce other files, you can do so by adding them to the returned object:\n\n```js\nhtml: function (context) {\n  return {\n    'index.html': context.defaultTemplate(),\n\n    // if you build it entirely yourself it should be a complete HTML document\n    // using whatever templating system you want\n    'other.html': '\u003c!DOCTYPE\u003e\u003cbody\u003e\u003ch1\u003eHello World\u003c/h1\u003e\u003c/body\u003e'\n  }\n}\n```\n\n**async version**\n\n```js\nhtml: function (context, callback) {\n  // do whatever async stuff generate result object\n  // and pass it to the callback instead\n  db.fetchData(function (err, data) {\n    callback(null, {\n      'index.html': buildHTML(data),\n      'other.html': doSomethingElse(data)\n    })\n  })\n}\n```\n\n**The context argument**\n\nYour `html` function will be called with a context object that contains the following:\n\n1. `context.main`: the name of the generated JS file\n2. `context.css`: the name of the generated CSS file. This only exists if `isDev` is `false`, since in development mode the css bundle is inserted dynamically into the document by the [`style-loader`](https://github.com/webpack/style-loader).\n3. `context.defaultTemplate()` a convenience method you can call to generate the basic HTML shown above. This takes a few options too if you just want to make minor tweaks. If you want to do more, just don't use the default template, generate your own instead. The options are:\n  - `{html: '\u003cdiv id=\"my-container\"\u003eSome custom markup\u003c/div\u003e'}` This markup will be added inside the `\u003cbody\u003e` tag. By default it adds a `\u003cdiv id=\"root\"\u003e\u003c/div\u003e` as a mount target for React apps.\n  - `{charset: 'utf-8'}` what charset to set\n  - `{title: 'your app'}` sets `\u003ctitle\u003e`\n  - `{head: 'any string'}` anything else you want to put in the `head`, other meta tags, or whatnot.\n  - `{metaViewport: boolean|object}` set to false if you don't want the default viewport tag. Set to an object with `userScalable` true if you don't want to block user-zoom on mobile\n  - `{publicPath: 'http://mycdn.com/'}`  (default `/`) pass in path that will prefix the generated css/js files in the template. Note, there is `output.publicPath` provided by webpack, but doesn't easily allow for switching based on envirnoment. In this method we've got access to `context.isDev` and can easily switch based on that.\n  - `{metaTags: {}}` lets you easily add `\u003cmeta\u003e` tags to the document head. Takes an object where the key is the `name` and the value is the `content`.\n  - `{lang: 'en-US'}` sets the `lang` attribute on the `\u003chtml\u003e` tag.\n4. `context.isDev`: boolean specifying whether or not we're in dev mode.\n5. `context.package`: the parsed `package.json` file as an object.\n6. `context.stats`: the stats object returned by webpack. Of likely interest is `context.stats.hash` (a hash of current build). `context.stats.assets` is an array of all the assets that will be generated. This can be useful for generating cache manifests, etc. Overall, this is a big object that lists all the modules in your whole app. You likely won't need most of it, but it's all there in case you do. ([A sample can be found here](https://raw.githubusercontent.com/webpack/analyse/master/app/pages/upload/example.json)).\n\n\n### `serveCustomHtmlInDev` (optional, boolean, default is `true`)\n\nBy default, if you supply an `html` function it will always be used, whether you're in development mode or not.\n\nSet this option to `false` to only use your `html` function when building for production. Note, that `.isDev` is attached to the context object passed to the `html` function as described above, so alternately you could just use that value to branch your logic within that function. Using this option circumvents the custom `html` function entirely during development.\n\n## Proxy\n\nThe dev server uses [http-proxy-middleware](https://www.npmjs.com/package/http-proxy-middleware) to optionally proxy requests to a separate, possibly external, backend server. Proxies can be specified with `devServer.proxy`. This can be a single proxy, or an array of proxies. The proxy context and options are passed directly to `http-proxy-middleware`.\n\n```js\ngetConfig({\n  in: 'src/app.js',\n  out: 'public',\n  clearBeforeBuild: true,\n\n  // Use devServer.proxy to specify proxies\n  devServer: {\n    proxy: {\n      context: \"/api\",\n      options: {\n        target: \"http://localhost:3001\",\n        pathRewrite: {\n          \"^/api\": \"\"\n        }\n      }\n    }\n  }\n})\n```\n\n## Developing on multiple devices at once\n\nIf you're building an app that you want to look good on all devices it's nice to be able to run them all at once.\n\nHotloading makes this extremely nice and convenient.\n\nIf you're on a Mac, this is fairly simple. Just add a `hostname` option to your config like so:\n\n```js\nmodule.exports = getConfig({\n  in: 'src/app.js',\n  out: 'public',\n\n  // set this to whatever your machine name is\n  // plus `.local`\n  // my machine is `loki` so I do:\n  hostname: 'loki.local'\n})\n```\n\nNow when you run the development instead of going to localhost open: `http://{{yourmachine}}.local:3000` on any device that's on your local network, they should all connect and all hotload your style and JS changes.\n\n## Extending `hjs-webpack`\n\n`hjs-webpack` is not designed to take all the same options as `webpack`. Instead it is designed to take the [config options](#config-options) listed above and return an object that is then consumed by `webpack`. That means that if you want to change/add/remove anything in the config, it is the same as manipulating any JavaScript object.\n\nHere's an example where `hjs-webpack` is used to create the base `webpack` config, and then it is manipulated to add a new loader, plugin, and option.\n\n```js\nvar webpack = require('webpack')\nvar getConfig = require('hjs-webpack')\nvar config = getConfig(myHjsWebpackOptions)\n\n// Add xml-loader\nconfig.module.rules.push({ test: /\\.xml$/, use: ['xml-loader'] })\n\n// Add webpack PrefetchPlugin\nconfig.plugins.push(new webpack.PrefetchPlugin([context], request))\n\n// Add a separate entry point for jQuery\nconfig.resolve.alias = { jquery:'jquery/src/jquery.js' }\nconfig.plugins.push(\n  new webpack.ProvidePlugin({\n    jQuery: 'jquery',\n    $: 'jquery',\n    'window.jQuery':'jquery'\n  }),\n  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')\n);\nconfig.entry = {\n  // Add entries for vendors\n  vendors: ['jquery'],\n  // Reassign previous single entry to main entry\n  main: config.entry\n};\n\n// Export the newly manipulated config\nmodule.exports = config\n```\n\n\n\n### Changing Babel config\n\nSince `hjs-webpack` already has a babel loader, the easiest way to tweak Babel settings is to create a file at the root of your project called `.babelrc` that contains config settings. See [babelrc docs](https://babeljs.io/docs/usage/babelrc/) for more options.\n\nThere are some babel presets that work well with `hjs-webpack`. You can check out an example of using presets in the [examples directory](./examples). There's one with [hot reloading](./examples/assets-and-index-html/.babelrc) and one [without](/examples/just-assets-no-html/.babelrc). You'll need to install these presets just like any other dev dependencies.\n\nHere's a quick example if you like copy/pasting:\n\n```sh\nnpm install babel-preset-es2015 babel-preset-react babel-preset-react-hmre --save-dev\n```\n\nand then your `.babelrc`\n\n```json\n{\n  \"presets\": [\"es2015\", \"react\"],\n  \"env\": {\n    \"development\": {\n      \"presets\": [\"react-hmre\"]\n    }\n  }\n}\n```\n\n\n\n## Credits\n\nThis is mostly just some add-ons to [webpack](http://webpack.github.io/) so most of the credit goes there.\n\nIf you're interested in building apps this way, watch the free section of the tutorials at http://learn.humanjavascript.com. It shows basic usage of this module. Also, you can follow me on twitter [@HenrikJoreteg](http://twitter.com/henrikjoreteg).\n\nBig thanks to co-maintainer [@LukeKarrys](http://twitter.com/lukekarrys) for helping find/fix some really annoying bugs.\n\n## Contributing/Forking\n\nBeware that this is all highly opinionated and contains a lot of personal preferences. If you want to add or remove major things, feel free to open issues or send PRs, but you may just want to fork it.\n\n## Changelog\n\nSee the [`CHANGELOG.md`](CHANGELOG.md)\n\n## license\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHenrikJoreteg%2Fhjs-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHenrikJoreteg%2Fhjs-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHenrikJoreteg%2Fhjs-webpack/lists"}