├── .circleci
├── config.yml
└── setup-puppeteer.sh
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .github
├── CONTRIBUTING.md
├── FAQ.md
├── FEATURES.md
├── ISSUE_TEMPLATE.md
├── ISSUE_TEMPLATE
│ ├── BUG.md
│ ├── DOCS.md
│ ├── FEATURE.md
│ ├── MODIFICATION.md
│ └── SUPPORT.md
├── PULL_REQUEST_TEMPLATE.md
├── funding.yml
└── labels.json
├── .gitignore
├── .nvmrc
├── .vscode
├── launch.json
└── settings.json
├── LICENSE
├── README.md
├── assets
├── 404.png
├── serve.svg
├── status-beacons-top funky.gif
├── status-beacons.gif
└── status-overlay.png
├── client.js
├── codecov.yml
├── commitlint.config.js
├── lib
├── client
│ ├── ClientSocket.js
│ ├── client.js
│ ├── hmr.js
│ ├── log.js
│ └── overlays
│ │ ├── progress-minimal.js
│ │ ├── progress.js
│ │ ├── status.js
│ │ └── util.js
├── errors.js
├── helpers.js
├── index.js
├── log.js
├── middleware.js
├── plugins
│ ├── hmr.js
│ └── ramdisk.js
├── routes.js
├── server.js
├── validate.js
└── ws.js
├── package.json
├── pnpm-lock.yaml
├── recipes
├── README.md
├── angular
│ ├── .eslintrc
│ ├── .gitignore
│ ├── LICENSE
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app.ts
│ │ ├── app
│ │ │ ├── app.component.html
│ │ │ ├── app.component.scss
│ │ │ ├── app.component.ts
│ │ │ └── app.module.ts
│ │ ├── index.html
│ │ └── polyfills.ts
│ ├── tsconfig.json
│ ├── tslint.json
│ └── webpack.config.js
├── bonjour-broadcast.md
├── builtin-middleware.md
├── create-react-app
│ ├── .gitignore
│ ├── README.md
│ ├── config-overrides.js
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ └── manifest.json
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── logo.svg
│ │ └── serviceWorker.js
│ └── webpack.config.js
├── custom-headers.md
├── dynamic-port.md
├── entry-points.md
├── four0four.md
├── internal-ip.md
├── multi-compiler.md
├── multi-entry.md
├── open-custom-uri.md
├── proxies.md
├── react-ssr
│ ├── .eslintrc
│ ├── README.md
│ ├── client
│ │ ├── Root.js
│ │ └── index.js
│ ├── package-lock.json
│ ├── package.json
│ ├── server
│ │ ├── index.js
│ │ └── main.js
│ └── webpack.config.js
├── react
│ ├── .babelrc
│ ├── .eslintrc
│ ├── LICENSE
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.js
│ │ ├── index.js
│ │ └── style.css
│ └── webpack.config.js
├── refresh-on-failure
│ ├── .babelrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.jsx
│ │ ├── another.js
│ │ └── index.js
│ └── webpack.config.js
├── static-html-files.md
├── vue
│ ├── .babelrc
│ ├── .eslintrc
│ ├── LICENSE
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ └── index.js
│ └── webpack.config.js
└── watch-static-content.md
└── test
├── .eslintrc
├── errors.test.js
├── fixtures
├── https
│ ├── app.js
│ ├── index.html
│ ├── localhost.crt
│ ├── localhost.key
│ ├── localhost.pfx
│ └── webpack.config.js
├── multi
│ ├── app.js
│ ├── component.js
│ ├── index.html
│ ├── webpack.config.js
│ ├── work.js
│ └── worker.js
├── proxy
│ ├── app.js
│ ├── component.js
│ ├── index.html
│ ├── proxy-rewrite.config.js
│ ├── proxy-server.js
│ └── webpack.config.js
├── ramdisk-empty-pkg
│ ├── app.js
│ ├── package.json
│ └── webpack.config.js
├── ramdisk
│ ├── app.js
│ ├── component.js
│ ├── config-context-error.js
│ ├── config-cwd-error.js
│ ├── custom-options.js
│ ├── cwd-error
│ │ └── .gitkeep
│ ├── index.html
│ └── webpack.config.js
├── simple
│ ├── app.js
│ ├── component.js
│ ├── index.html
│ └── webpack.config.js
└── wait-for-build
│ ├── app.js
│ └── make-config.js
├── helpers.test.js
├── helpers
├── port.js
└── puppeteer.js
├── https.test.js
├── integration
├── force-refresh.test.js
├── multi-hmr.test.js
└── single-hmr.test.js
├── middleware.test.js
├── plugin.test.js
├── proxy-rewrite.test.js
├── proxy.test.js
├── ramdisk.test.js
├── routes.test.js
├── server.test.js
├── snapshots
├── errors.test.js.md
├── errors.test.js.snap
├── plugin.test.js.md
├── plugin.test.js.snap
├── proxy-rewrite.test.js.md
├── proxy-rewrite.test.js.snap
├── proxy.test.js.md
├── proxy.test.js.snap
├── ramdisk.test.js.md
├── ramdisk.test.js.snap
├── validate.test.js.md
└── validate.test.js.snap
├── validate.test.js
├── wait-for-build.test.js
└── ws.test.js
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | jobs:
3 | dependency_cache:
4 | docker:
5 | - image: rollupcabal/circleci-node-base:latest
6 | steps:
7 | - checkout
8 | - restore_cache:
9 | key: dependency-cache-{{ checksum "package-lock.json" }}
10 | - run:
11 | name: Update NPM
12 | command: npm install npm@latest -g
13 | - run:
14 | name: Node Info
15 | command: node --version && npm --version
16 | - run:
17 | name: Install Dependencies
18 | command: npm install
19 | - save_cache:
20 | key: dependency-cache-{{ checksum "package-lock.json" }}
21 | paths:
22 | - ./node_modules
23 | node-v14-latest:
24 | machine: true
25 | steps:
26 | - checkout
27 | - restore_cache:
28 | key: dependency-cache-{{ checksum "package-lock.json" }}
29 | - run:
30 | name: Run Tests
31 | command: |
32 | sudo apt-get update
33 | sudo apt-get install -y libgbm-dev
34 | set +e
35 | touch $BASH_ENV
36 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
37 | export NVM_DIR="/opt/circleci/.nvm"
38 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
39 | nvm install 14
40 | nvm alias default 14
41 | node --version && npm --version
42 | npm install
43 | npm run ci:coverage
44 | - run:
45 | name: Submit coverage data to codecov.
46 | command: bash <(curl -s https://codecov.io/bash)
47 | when: on_success
48 | analysis:
49 | docker:
50 | - image: rollupcabal/circleci-node-base:latest
51 | steps:
52 | - checkout
53 | - restore_cache:
54 | key: dependency-cache-{{ checksum "package-lock.json" }}
55 | - run:
56 | name: NPM Rebuild
57 | command: npm install
58 | - run:
59 | name: Run linting
60 | command: npm run lint
61 | - run:
62 | name: Validate Commit Messages
63 | command: npm run ci:lint:commits
64 | workflows:
65 | version: 2
66 | validate:
67 | jobs:
68 | - dependency_cache
69 | - analysis:
70 | requires:
71 | - dependency_cache
72 | filters:
73 | tags:
74 | only: /.*/
75 | - node-v14-latest:
76 | requires:
77 | - analysis
78 | filters:
79 | tags:
80 | only: /.*/
81 |
--------------------------------------------------------------------------------
/.circleci/setup-puppeteer.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | sudo apt-get update
4 | sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
5 | libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
6 | libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
7 | libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
8 | ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
9 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | end_of_line = lf
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 |
12 | [*.md]
13 | insert_final_newline = true
14 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | dist
3 | *.snap
4 | output.js
5 | *-wps-hmr.*
6 | *.hot-update.js
7 | test/**/output
8 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["shellscape"],
3 | "globals": {
4 | "document": true,
5 | "ʎɐɹɔosǝʌɹǝs": true,
6 | "WebSocket": true,
7 | "window": true,
8 | "__webpack_hash__": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | package-lock.json -diff
2 | * text=auto
3 | bin/* eol=lf
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing in webpack-plugin-serve
2 |
3 | We 💛 contributions! The rules for contributing to this org are few:
4 |
5 | 1. Don't be a jerk
6 | 1. Search issues before opening a new one
7 | 1. Lint and run tests locally before submitting a PR
8 | 1. Adhere to the code style the org has chosen
9 |
10 |
11 | ## Before Committing
12 |
13 | 1. Use at least Node.js v10.11.0 or higher. [NVM](https://github.com/creationix/nvm) can be handy for switching between Node versions.
14 | 1. Lint your changes via `npm run lint`. Fix any errors and warnings before committing.
15 | 1. Test your changes via `npm run test`. Only Pull Requests with passing tests will be accepted.
16 |
--------------------------------------------------------------------------------
/.github/FEATURES.md:
--------------------------------------------------------------------------------
1 | [wps-size]: https://badgen.net/packagephobia/install/webpack-plugin-serve?label=size&color=green
2 | [wps-size-url]: https://packagephobia.now.sh/result?p=webpack-plugin-serve
3 |
4 | [ws-size]: https://badgen.net/packagephobia/install/webpack-serve?label=size&color=orange
5 | [ws-size-url]: https://packagephobia.now.sh/result?p=webpack-serve
6 |
7 | [wds-size]: https://badgen.net/packagephobia/install/webpack-dev-server?label=size&color=red
8 | [wds-size-url]: https://packagephobia.now.sh/result?p=webpack-dev-server
9 |
10 | ## Feature Comparison
11 |
12 | The grid below represents a comparison of features from the available and most used Webpack development servers.
13 |
14 | #### Key
15 |
16 | ✅ - Feature Supported
6 |
28 |
39 |
41 |
43 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/assets/status-beacons-top funky.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shellscape/webpack-plugin-serve/b19fce1db5f881af603879b8bb9c555c16ae394f/assets/status-beacons-top funky.gif
--------------------------------------------------------------------------------
/assets/status-beacons.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shellscape/webpack-plugin-serve/b19fce1db5f881af603879b8bb9c555c16ae394f/assets/status-beacons.gif
--------------------------------------------------------------------------------
/assets/status-overlay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shellscape/webpack-plugin-serve/b19fce1db5f881af603879b8bb9c555c16ae394f/assets/status-overlay.png
--------------------------------------------------------------------------------
/client.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 |
12 | /**
13 | * @note This file exists merely as an easy reference for folks adding it to their configuration entries
14 | */
15 |
16 | (() => {
17 | /* eslint-disable global-require */
18 | const { run } = require('./lib/client/client');
19 | let hash = '';
20 | let options;
21 | try {
22 | options = ʎɐɹɔosǝʌɹǝs;
23 | } catch (e) {
24 | const { log } = require('./lib/client/log');
25 | log.error(
26 | 'The entry for webpack-plugin-serve was included in your build, but it does not appear that the plugin was. Please check your configuration.'
27 | );
28 | }
29 |
30 | try {
31 | // eslint-disable-next-line camelcase
32 | hash = __webpack_hash__;
33 | } catch (e) {} // eslint-disable-line no-empty
34 |
35 | run(hash, options);
36 | })();
37 |
--------------------------------------------------------------------------------
/codecov.yml:
--------------------------------------------------------------------------------
1 | codecov:
2 | branch: master
3 | coverage:
4 | precision: 2
5 | round: down
6 | range: 70...100
7 | status:
8 | project: 'no'
9 | patch: 'yes'
10 | comment: 'off'
11 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const Configuration = {
3 | extends: ['@commitlint/config-conventional'],
4 |
5 | rules: {
6 | 'body-leading-blank': [1, 'always'],
7 | 'footer-leading-blank': [1, 'always'],
8 | 'header-max-length': [2, 'always', 72],
9 | 'scope-case': [2, 'always', 'lower-case'],
10 | 'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
11 | 'subject-empty': [2, 'never'],
12 | 'subject-full-stop': [2, 'never', '.'],
13 | 'type-case': [2, 'always', 'lower-case'],
14 | 'type-empty': [2, 'never'],
15 | 'type-enum': [2, 'always', [
16 | 'build',
17 | 'chore',
18 | 'ci',
19 | 'docs',
20 | 'feat',
21 | 'fix',
22 | 'perf',
23 | 'refactor',
24 | 'revert',
25 | 'style',
26 | 'test',
27 | ],
28 | ],
29 | },
30 | };
31 |
32 | module.exports = Configuration;
--------------------------------------------------------------------------------
/lib/client/ClientSocket.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const { error, refresh, warn } = require('./log')();
12 |
13 | // ignore 1008 (HTTP 400 equivalent) and 1011 (HTTP 500 equivalent)
14 | const ignoreCodes = [1008, 1011];
15 | const maxAttempts = 10;
16 |
17 | class ClientSocket {
18 | constructor(options, ...args) {
19 | this.args = args;
20 | this.attempts = 0;
21 | this.eventHandlers = [];
22 | this.options = options;
23 | this.retrying = false;
24 |
25 | this.connect();
26 | }
27 |
28 | addEventListener(...args) {
29 | this.eventHandlers.push(args);
30 | this.socket.addEventListener(...args);
31 | }
32 |
33 | close() {
34 | this.socket.close();
35 | }
36 |
37 | connect() {
38 | if (this.socket) {
39 | delete this.socket;
40 | }
41 |
42 | this.connecting = true;
43 |
44 | this.socket = new WebSocket(...this.args);
45 |
46 | if (this.options.retry) {
47 | this.socket.addEventListener('close', (event) => {
48 | if (ignoreCodes.includes(event.code)) {
49 | return;
50 | }
51 |
52 | if (!this.retrying) {
53 | warn(`The WebSocket was closed and will attempt to reconnect`);
54 | }
55 |
56 | this.reconnect();
57 | });
58 | } else {
59 | this.socket.onclose = () => warn(`The client WebSocket was closed. ${refresh}`);
60 | }
61 |
62 | this.socket.addEventListener('open', () => {
63 | this.attempts = 0;
64 | this.retrying = false;
65 | });
66 |
67 | if (this.eventHandlers.length) {
68 | for (const [name, fn] of this.eventHandlers) {
69 | this.socket.addEventListener(name, fn);
70 | }
71 | }
72 | }
73 |
74 | reconnect() {
75 | this.attempts += 1;
76 | this.retrying = true;
77 |
78 | if (this.attempts > maxAttempts) {
79 | error(`The WebSocket could not be reconnected. ${refresh}`);
80 | this.retrying = false;
81 | return;
82 | }
83 |
84 | const timeout = 1000 * this.attempts ** 2;
85 |
86 | setTimeout(() => this.connect(this.args), timeout);
87 | }
88 |
89 | removeEventListener(...args) {
90 | const [, handler] = args;
91 | this.eventHandlers = this.eventHandlers.filter(([, fn]) => fn === handler);
92 | this.socket.removeEventListener(...args);
93 | }
94 | }
95 |
96 | module.exports = { ClientSocket };
97 |
--------------------------------------------------------------------------------
/lib/client/client.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | /* eslint-disable global-require */
12 | const run = (buildHash, options) => {
13 | const { address, client = {}, hmr, progress, secure, status } = options;
14 |
15 | options.firstInstance = !window.webpackPluginServe; // eslint-disable-line no-param-reassign
16 |
17 | window.webpackPluginServe = window.webpackPluginServe || {
18 | compilers: {}
19 | };
20 | window.webpackPluginServe.silent = !!client.silent;
21 |
22 | const { ClientSocket } = require('./ClientSocket');
23 | const { replace } = require('./hmr');
24 | const { error, info, warn } = require('./log')();
25 |
26 | const protocol = secure ? 'wss' : 'ws';
27 | const socket = new ClientSocket(client, `${client.protocol || protocol}://${client.address || address}/wps`);
28 |
29 | const { compilerName } = options;
30 |
31 | window.webpackPluginServe.compilers[compilerName] = {};
32 |
33 | // prevents ECONNRESET errors on the server
34 | window.addEventListener('beforeunload', () => socket.close());
35 |
36 | socket.addEventListener('message', (message) => {
37 | const { action, data = {} } = JSON.parse(message.data);
38 | const { errors, hash = '', warnings } = data || {};
39 | const shortHash = hash.slice(0, 7);
40 | const identifier = options.compilerName ? `(Compiler: ${options.compilerName}) ` : '';
41 | const compiler = window.webpackPluginServe.compilers[compilerName];
42 | const { wpsId } = data;
43 |
44 | switch (action) {
45 | case 'build':
46 | compiler.done = false;
47 | break;
48 | case 'connected':
49 | info(`WebSocket connected ${identifier}`);
50 | break;
51 | case 'done':
52 | compiler.done = true;
53 | break;
54 | case 'problems':
55 | if (data.errors.length) {
56 | error(`${identifier}Build ${shortHash} produced errors:\n`, errors);
57 | }
58 | if (data.warnings.length) {
59 | warn(`${identifier}Build ${shortHash} produced warnings:\n`, warnings);
60 | }
61 | break;
62 | case 'reload':
63 | window.location.reload();
64 | break;
65 | case 'replace':
66 | // actions with a wpsId in tow indicate actions that should only be executed when the wpsId sent
67 | // matches the wpsId set in options. this is how we can identify multiple compilers in the
68 | // client.
69 | if (wpsId && wpsId === options.wpsId) {
70 | replace(buildHash, hash, hmr === 'refresh-on-failure');
71 | }
72 | break;
73 | default:
74 | }
75 | });
76 |
77 | if (options.firstInstance) {
78 | if (progress === 'minimal') {
79 | const { init } = require('./overlays/progress-minimal');
80 | init(options, socket);
81 | } else if (progress) {
82 | const { init } = require('./overlays/progress');
83 | init(options, socket);
84 | }
85 |
86 | if (status) {
87 | const { init } = require('./overlays/status');
88 | init(options, socket);
89 | }
90 |
91 | if (module.hot) {
92 | info('Hot Module Replacement is active');
93 |
94 | if (options.liveReload) {
95 | info('Live Reload taking precedence over Hot Module Replacement');
96 | }
97 | } else {
98 | warn('Hot Module Replacement is inactive');
99 | }
100 |
101 | if (!module.hot && options.liveReload) {
102 | info('Live Reload is active');
103 | }
104 | }
105 | };
106 |
107 | module.exports = { run };
108 |
--------------------------------------------------------------------------------
/lib/client/hmr.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const { error, info, refresh, warn } = require('./log')();
12 |
13 | let latest = true;
14 |
15 | const hmr = (onFailure) => {
16 | return {
17 | onUnaccepted(data) {
18 | onFailure();
19 | warn('Change in unaccepted module(s):\n', data);
20 | warn(data);
21 | },
22 | onDeclined(data) {
23 | onFailure();
24 | warn('Change in declined module(s):\n', data);
25 | },
26 | onErrored(data) {
27 | onFailure();
28 | error('Error in module(s):\n', data);
29 | }
30 | };
31 | };
32 |
33 | const replace = async (buildHash, hash, refreshOnFailure) => {
34 | const { apply, check, status } = module.hot;
35 |
36 | if (hash) {
37 | // eslint-disable-next-line no-undef
38 | latest = hash.includes(buildHash);
39 | }
40 |
41 | if (!latest) {
42 | const hmrStatus = status();
43 |
44 | if (hmrStatus === 'abort' || hmrStatus === 'fail') {
45 | warn(`An HMR update was triggered, but ${hmrStatus}ed. ${refresh}`);
46 | return;
47 | }
48 |
49 | let modules;
50 |
51 | try {
52 | modules = await check(false);
53 | } catch (e) {
54 | // noop. this typically happens when a MultiCompiler has more than one compiler that includes
55 | // this script, and an update happens with a hash that isn't part of the compiler/module this
56 | // instance was loaded for.
57 | return;
58 | }
59 |
60 | if (!modules) {
61 | warn(`No modules found for replacement. ${refresh}`);
62 | return;
63 | }
64 |
65 | modules = await apply(
66 | hmr(
67 | refreshOnFailure
68 | ? () => {
69 | if (refreshOnFailure) {
70 | // eslint-disable-next-line no-undef
71 | location.reload();
72 | }
73 | }
74 | : () => {}
75 | )
76 | );
77 |
78 | if (modules) {
79 | latest = true;
80 | info(`Build ${hash.slice(0, 7)} replaced:\n`, modules);
81 | }
82 | }
83 | };
84 |
85 | module.exports = { replace };
86 |
--------------------------------------------------------------------------------
/lib/client/log.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const { error, info, warn } = console;
12 | const log = {
13 | error: error.bind(console, '⬡ wps:'),
14 | info: info.bind(console, '⬡ wps:'),
15 | refresh: 'Please refresh the page',
16 | warn: warn.bind(console, '⬡ wps:')
17 | };
18 | const noop = () => {};
19 | const silent = {
20 | error: noop,
21 | info: noop,
22 | warn: noop
23 | };
24 |
25 | module.exports = () => (window.webpackPluginServe.silent ? silent : log);
26 |
--------------------------------------------------------------------------------
/lib/client/overlays/progress-minimal.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell, Matheus Gonçalves da Silva
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const { addCss, addHtml } = require('./util');
12 |
13 | const ns = 'wps-progress-minimal';
14 | const html = `
15 |
18 | `;
19 | const css = `
20 | #${ns} {
21 | position: fixed;
22 | top: 0;
23 | left: 0;
24 | height: 4px;
25 | width: 100vw;
26 | z-index: 2147483645;
27 | }
28 |
29 | #${ns}-bar {
30 | width: 0%;
31 | height: 4px;
32 | background-color: rgb(186, 223, 172);
33 | }
34 |
35 | @keyframes ${ns}-fade {
36 | 0% {
37 | opacity: 1;
38 | }
39 | 100% {
40 | opacity: 0;
41 | }
42 | }
43 |
44 | .${ns}-disappear {
45 | animation: ${ns}-fade .3s;
46 | animation-fill-mode: forwards;
47 | animation-delay: .5s;
48 | }
49 |
50 | .${ns}-hidden {
51 | display: none;
52 | }
53 | `;
54 |
55 | let hideOnPageVisible = false;
56 |
57 | const update = (percent) => {
58 | const bar = document.querySelector(`#${ns}-bar`);
59 | bar.style.width = `${percent}%`;
60 | };
61 |
62 | const reset = (wrapper) => {
63 | wrapper.classList.add(`${ns}-disappear`);
64 | };
65 |
66 | const init = (options, socket) => {
67 | if (options.firstInstance) {
68 | document.addEventListener('DOMContentLoaded', () => {
69 | addCss(css);
70 | addHtml(html);
71 |
72 | const wrapper = document.querySelector(`#${ns}`);
73 | wrapper.addEventListener('animationend', () => {
74 | update(0);
75 | wrapper.classList.add(`${ns}-hidden`);
76 | });
77 | });
78 |
79 | document.addEventListener('visibilitychange', () => {
80 | if (!document.hidden && hideOnPageVisible) {
81 | const wrapper = document.querySelector(`#${ns}`);
82 | reset(wrapper);
83 | hideOnPageVisible = false;
84 | }
85 | });
86 | }
87 |
88 | socket.addEventListener('message', (message) => {
89 | const { action, data } = JSON.parse(message.data);
90 |
91 | if (action !== 'progress') {
92 | return;
93 | }
94 |
95 | const percent = Math.floor(data.percent * 100);
96 | const wrapper = document.querySelector(`#${ns}`);
97 |
98 | if (wrapper) {
99 | wrapper.classList.remove(`${ns}-hidden`, `${ns}-disappear`);
100 | }
101 |
102 | if (data.percent === 1) {
103 | if (document.hidden) {
104 | hideOnPageVisible = true;
105 | } else {
106 | reset(wrapper);
107 | }
108 | } else {
109 | hideOnPageVisible = false;
110 | }
111 |
112 | update(percent);
113 | });
114 | };
115 |
116 | module.exports = {
117 | init
118 | };
119 |
--------------------------------------------------------------------------------
/lib/client/overlays/progress.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell, Matheus Gonçalves da Silva
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const { addCss, addHtml } = require('./util');
12 |
13 | const ns = 'wps-progress';
14 | const css = `
15 | #${ns}{
16 | width: 200px;
17 | height: 200px;
18 | position: fixed;
19 | right: 5%;
20 | top: 5%;
21 | transition: opacity .25s ease-in-out;
22 | z-index: 2147483645;
23 | }
24 |
25 | #${ns}-bg {
26 | fill: #282d35;
27 | }
28 |
29 | #${ns}-fill {
30 | fill: rgba(0, 0, 0, 0);
31 | stroke: rgb(186, 223, 172);
32 | stroke-dasharray: 219.99078369140625;
33 | stroke-dashoffset: -219.99078369140625;
34 | stroke-width: 10;
35 | transform: rotate(90deg)translate(0px, -80px);
36 | }
37 |
38 | #${ns}-percent {
39 | font-family: 'Open Sans';
40 | font-size: 18px;
41 | fill: #ffffff;
42 | }
43 |
44 | #${ns}-percent-value {
45 | dominant-baseline: middle;
46 | text-anchor: middle;
47 | }
48 |
49 | #${ns}-percent-super {
50 | fill: #bdc3c7;
51 | font-size: .45em;
52 | baseline-shift: 10%;
53 | }
54 |
55 | .${ns}-noselect {
56 | -webkit-touch-callout: none;
57 | -webkit-user-select: none;
58 | -khtml-user-select: none;
59 | -moz-user-select: none;
60 | -ms-user-select: none;
61 | user-select: none;
62 | cursor: default;
63 | }
64 |
65 | @keyframes ${ns}-fade {
66 | 0% {
67 | opacity: 1;
68 | transform: scale(1);
69 | -webkit-transform: scale(1);
70 | }
71 | 100% {
72 | opacity: 0;
73 | transform: scale(0);
74 | -webkit-transform: scale(0);
75 | }
76 | }
77 |
78 | .${ns}-disappear {
79 | animation: ${ns}-fade .3s;
80 | animation-fill-mode:forwards;
81 | animation-delay: .5s;
82 | }
83 |
84 | .${ns}-hidden {
85 | display: none;
86 | }
87 |
88 | /* Put google web font at the end, or you'll see FOUC in Firefox */
89 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
90 | `;
91 |
92 | const html = `
93 |
94 | 0 %
98 | `;
99 |
100 | let hideOnPageVisible = false;
101 |
102 | const update = (percent) => {
103 | const max = -219.99078369140625;
104 | const value = document.querySelector(`#${ns}-percent-value`);
105 | const track = document.querySelector(`#${ns}-fill`);
106 | const offset = ((100 - percent) / 100) * max;
107 |
108 | track.setAttribute('style', `stroke-dashoffset: ${offset}`);
109 | value.innerHTML = percent.toString();
110 | };
111 |
112 | const reset = (svg) => {
113 | svg.classList.add(`${ns}-disappear`);
114 | };
115 |
116 | const init = (options, socket) => {
117 | if (options.firstInstance) {
118 | document.addEventListener('DOMContentLoaded', () => {
119 | addCss(css);
120 | addHtml(html);
121 |
122 | // Reset progress to zero after disappear animation
123 | const svg = document.querySelector(`#${ns}`);
124 | svg.addEventListener('animationend', () => {
125 | update(0);
126 | svg.classList.add(`${ns}-hidden`);
127 | });
128 | });
129 |
130 | document.addEventListener('visibilitychange', () => {
131 | if (!document.hidden && hideOnPageVisible) {
132 | const svg = document.querySelector(`#${ns}`);
133 | reset(svg);
134 | hideOnPageVisible = false;
135 | }
136 | });
137 | }
138 |
139 | socket.addEventListener('message', (message) => {
140 | const { action, data } = JSON.parse(message.data);
141 |
142 | if (action !== 'progress') {
143 | return;
144 | }
145 |
146 | const percent = Math.floor(data.percent * 100);
147 | const svg = document.querySelector(`#${ns}`);
148 |
149 | if (!svg) {
150 | return;
151 | }
152 |
153 | // we can safely call this even if it doesn't have the class
154 | svg.classList.remove(`${ns}-disappear`, `${ns}-hidden`);
155 |
156 | if (data.percent === 1) {
157 | if (document.hidden) {
158 | hideOnPageVisible = true;
159 | } else {
160 | reset(svg);
161 | }
162 | } else {
163 | hideOnPageVisible = false;
164 | }
165 |
166 | update(percent);
167 | });
168 | };
169 |
170 | module.exports = { init };
171 |
--------------------------------------------------------------------------------
/lib/client/overlays/util.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const addHtml = (html, parent) => {
12 | const div = document.createElement('div');
13 | const nodes = [];
14 |
15 | div.innerHTML = html.trim();
16 |
17 | while (div.firstChild) {
18 | nodes.push((parent || document.body).appendChild(div.firstChild));
19 | }
20 |
21 | return nodes;
22 | };
23 |
24 | const addCss = (css) => {
25 | const style = document.createElement('style');
26 |
27 | style.type = 'text/css';
28 |
29 | if (css.styleSheet) {
30 | style.styleSheet.cssText = css;
31 | } else {
32 | style.appendChild(document.createTextNode(css));
33 | }
34 |
35 | // append the stylesheet for the svg
36 | document.head.appendChild(style);
37 | };
38 |
39 | const socketMessage = (socket, handler) => {
40 | socket.addEventListener('message', (message) => {
41 | const { action, data = {} } = JSON.parse(message.data);
42 | handler(action, data);
43 | });
44 | };
45 |
46 | module.exports = { addCss, addHtml, socketMessage };
47 |
--------------------------------------------------------------------------------
/lib/errors.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | class WebpackPluginServeError extends Error {
12 | constructor(...args) {
13 | super(...args);
14 | this.name = 'WebpackPluginServeError';
15 | }
16 | }
17 |
18 | class PluginExistsError extends WebpackPluginServeError {
19 | constructor(...args) {
20 | super(...args);
21 | this.name = 'PluginExistsError';
22 | this.code = 'ERR_PLUGIN_EXISTS';
23 | }
24 | }
25 |
26 | class RamdiskPathError extends WebpackPluginServeError {
27 | constructor(...args) {
28 | super(...args);
29 | this.name = 'RamdiskPathError';
30 | this.code = 'ERR_RAMDISK_PATH';
31 | }
32 | }
33 |
34 | module.exports = { PluginExistsError, RamdiskPathError, WebpackPluginServeError };
35 |
--------------------------------------------------------------------------------
/lib/helpers.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | getMajorVersion: (version) =>
3 | typeof version === 'string' && version.includes('.') ? version.split('.')[0] : false
4 | };
5 |
--------------------------------------------------------------------------------
/lib/log.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const chalk = require('chalk');
12 | const loglevel = require('loglevelnext');
13 |
14 | const symbols = { ok: '⬡', whoops: '⬢' };
15 | const colors = {
16 | trace: 'cyan',
17 | debug: 'magenta',
18 | info: 'blue',
19 | warn: 'yellow',
20 | error: 'red'
21 | };
22 |
23 | /* istanbul ignore next */
24 | const forceError = (...args) => {
25 | const { error } = console;
26 | error(chalk.red(`${symbols.whoops} wps:`), ...args);
27 | };
28 |
29 | const getLogger = (options) => {
30 | const prefix = {
31 | level: ({ level }) => {
32 | const color = colors[level];
33 | /* istanbul ignore next */
34 | const symbol = ['error', 'warn'].includes(level) ? symbols.whoops : symbols.ok;
35 | return chalk[color](`${symbol} wps: `);
36 | },
37 | template: '{{level}}'
38 | };
39 |
40 | /* istanbul ignore if */
41 | if (options.timestamp) {
42 | prefix.template = `[{{time}}] ${prefix.template}`;
43 | }
44 |
45 | /* eslint-disable no-param-reassign */
46 | options.prefix = prefix;
47 | options.name = 'webpack-plugin-serve';
48 |
49 | const log = loglevel.create(options);
50 |
51 | return log;
52 | };
53 |
54 | module.exports = { forceError, getLogger };
55 |
--------------------------------------------------------------------------------
/lib/middleware.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const convert = require('koa-connect');
12 | const historyApiFallback = require('connect-history-api-fallback');
13 | const koaCompress = require('koa-compress');
14 | const koaStatic = require('koa-static');
15 | const onetime = require('onetime');
16 | const { createProxyMiddleware } = require('http-proxy-middleware');
17 |
18 | const { middleware: wsMiddleware } = require('./ws');
19 |
20 | let staticPaths = [];
21 |
22 | const render404 = (ctx) => {
23 | const faqUrl =
24 | 'https://github.com/shellscape/webpack-plugin-serve/blob/master/.github/FAQ.md#what-does-the-not-found--404-error-mean';
25 | const body = `Not Found / 404
26 |
27 | You may be seeing this error due to misconfigured options.this FAQ question for information on possible causes and remedies.
29 |
30 | Static Paths
31 | ${staticPaths.join('')}`;
32 | const css = ``;
77 | const html = `${css}${body}`;
78 |
79 | ctx.body = html; // eslint-disable-line no-param-reassign
80 | ctx.status = 404; // eslint-disable-line no-param-reassign
81 | };
82 |
83 | const getBuiltins = (app, options) => {
84 | const compress = (opts) => {
85 | // only enable compress middleware if the user has explictly enabled it
86 | if (opts || options.compress) {
87 | app.use(koaCompress(opts || options.compress));
88 | }
89 | };
90 |
91 | const four0four = (fn = () => {}) => {
92 | app.use(async (ctx, next) => {
93 | await next();
94 | if (ctx.status === 404) {
95 | render404(ctx);
96 | fn(ctx);
97 | }
98 | });
99 | };
100 |
101 | const headers = (reqHeaders) => {
102 | const headrs = reqHeaders || (options.headers || {});
103 | app.use(async (ctx, next) => {
104 | await next();
105 | for (const headr of Object.keys(headrs)) {
106 | ctx.set(headr, headrs[headr]);
107 | }
108 | });
109 | };
110 |
111 | const historyFallback = () => {
112 | if (options.historyFallback) {
113 | // https://github.com/shellscape/webpack-plugin-serve/issues/94
114 | // When using Firefox, the browser sends an accept header for /wps when using connect-history-api-fallback
115 | app.use(async (ctx, next) => {
116 | if (ctx.path.match(/^\/wps/)) {
117 | const { accept, ...reqHeaders } = ctx.request.header;
118 | ctx.request.header = reqHeaders; // eslint-disable-line no-param-reassign
119 | }
120 | await next();
121 | });
122 |
123 | app.use(convert(historyApiFallback(options.historyFallback)));
124 | }
125 | };
126 |
127 | const statik = (root, opts = {}) => {
128 | const paths = [].concat(root || options.static);
129 | staticPaths = paths;
130 | for (const path of paths) {
131 | app.use(koaStatic(path, opts));
132 | }
133 | };
134 |
135 | const proxy = (...args) => convert(createProxyMiddleware(...args));
136 | const websocket = () => app.use(wsMiddleware);
137 |
138 | proxy.skip = true;
139 |
140 | // by default, middleware are executed in the order they appear here.
141 | // the order of the properties returned in this object are important.
142 | return {
143 | compress: onetime(compress),
144 | headers: onetime(headers),
145 | historyFallback: onetime(historyFallback),
146 | static: onetime(statik),
147 | websocket: onetime(websocket),
148 | proxy,
149 | four0four: onetime(four0four)
150 | };
151 | };
152 |
153 | module.exports = { getBuiltins };
154 |
--------------------------------------------------------------------------------
/lib/plugins/hmr.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const { HotModuleReplacementPlugin, version } = require('webpack');
12 |
13 | const { getMajorVersion } = require('../helpers');
14 |
15 | const { PluginExistsError } = require('../errors');
16 |
17 | const addPlugin = (compiler) => {
18 | const hmrPlugin = new HotModuleReplacementPlugin();
19 | hmrPlugin.apply(compiler);
20 | };
21 |
22 | const init = function init(compiler, log) {
23 | const webpackMajorVersion = getMajorVersion(version);
24 | // eslint-disable-next-line no-param-reassign
25 | compiler.options.output = Object.assign(compiler.options.output, {
26 | hotUpdateChunkFilename: `${compiler.wpsId}-[id]-wps-hmr.js`,
27 | hotUpdateMainFilename:
28 | webpackMajorVersion >= 5
29 | ? `[runtime]-${compiler.wpsId}-wps-hmr.json`
30 | : `${compiler.wpsId}-wps-hmr.json`
31 | });
32 |
33 | const hasHMRPlugin = compiler.options.plugins.some(
34 | (plugin) => plugin instanceof HotModuleReplacementPlugin
35 | );
36 |
37 | /* istanbul ignore else */
38 | if (!hasHMRPlugin) {
39 | addPlugin(compiler);
40 | } else {
41 | log.error(
42 | 'webpack-plugin-serve adds HotModuleReplacementPlugin automatically. Please remove it from your config.'
43 | );
44 | throw new PluginExistsError(
45 | 'HotModuleReplacementPlugin exists in the specified configuration.'
46 | );
47 | }
48 | };
49 |
50 | module.exports = { init };
51 |
--------------------------------------------------------------------------------
/lib/plugins/ramdisk.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | /* eslint-disable no-param-reassign */
12 | const crypto = require('crypto');
13 | const { symlinkSync, readFileSync } = require('fs');
14 | const { basename, join, resolve } = require('path');
15 |
16 | const isCwd = require('is-path-cwd');
17 | const escalade = require('escalade/sync');
18 | const rm = require('rimraf');
19 | const { WebpackPluginRamdisk } = require('webpack-plugin-ramdisk');
20 |
21 | const { PluginExistsError, RamdiskPathError } = require('../errors');
22 |
23 | const readPkgName = () => {
24 | const pkgPath = escalade(process.cwd(), (dir, names) => {
25 | if (names.includes('package.json')) {
26 | return 'package.json';
27 | }
28 | return false;
29 | });
30 | // istanbul ignore if
31 | if (pkgPath == null) {
32 | return null;
33 | }
34 | try {
35 | const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
36 | return pkg.name;
37 | } catch (error) {
38 | // istanbul ignore next
39 | return null;
40 | }
41 | };
42 |
43 | module.exports = {
44 | init(compiler, options) {
45 | const hasPlugin = compiler.options.plugins.some(
46 | (plugin) => plugin instanceof WebpackPluginRamdisk
47 | );
48 |
49 | /* istanbul ignore if */
50 | if (hasPlugin) {
51 | this.log.error(
52 | 'webpack-plugin-serve adds WebpackRamdiskPlugin automatically. Please remove it from your config.'
53 | );
54 | throw new PluginExistsError('WebpackRamdiskPlugin exists in the specified configuration.');
55 | }
56 |
57 | let pkgName = readPkgName();
58 | const { path } = compiler.options.output;
59 | const lastSegment = basename(path);
60 | const errorInfo = `The ramdisk option creates a symlink from \`output.path\`, to the ramdisk build output path, and must remove any existing \`output.path\` to do so.`;
61 |
62 | // if output.path is /batman/batcave, and the user is running the build with wsp from
63 | // /batman/batcave, then the process will try and delete cwd, which we don't want for a number
64 | // of reasons
65 | // console.log('output.path:', resolve(path));
66 | // console.log('process.cwd:', process.cwd());
67 | if (isCwd(path)) {
68 | throw new RamdiskPathError(
69 | `Cannot remove current working directory. ${errorInfo} Please run from another path, or choose a different \`output.path\`.`
70 | );
71 | }
72 |
73 | // if output.path is /batman/batcave, and the compiler context is not set and cwd is
74 | // /batman/batcave, or the context is the same as output.path, then the process will try and
75 | // delete the context directory, which probably contains src, configs, etc. throw an error
76 | // and be overly cautious rather than let the user do something bad. oddly enough, webpack
77 | // doesn't protect against context === output.path.
78 | if (resolve(compiler.context) === resolve(path)) {
79 | throw new RamdiskPathError(
80 | `Cannot remove ${path}. ${errorInfo} Please set the \`context\` to a another path, choose a different \`output.path\`.`
81 | );
82 | }
83 |
84 | if (!pkgName) {
85 | // use md5 for a short hash that'll be consistent between wps starts
86 | const md5 = crypto.createHash('md5');
87 | md5.update(path);
88 | pkgName = md5.digest('hex');
89 | }
90 |
91 | const newPath = join(pkgName, lastSegment);
92 |
93 | // clean up the output path in prep for the ramdisk plugin
94 | compiler.options.output.path = newPath;
95 |
96 | this.log.info(`Ramdisk enabled`);
97 |
98 | const defaultOptions = { name: 'wps' };
99 | const plugin = new WebpackPluginRamdisk(
100 | typeof options === 'object' ? { ...options, ...defaultOptions } : defaultOptions
101 | );
102 | plugin.apply(compiler);
103 |
104 | rm.sync(path);
105 |
106 | symlinkSync(compiler.options.output.path, path);
107 | }
108 | };
109 |
--------------------------------------------------------------------------------
/lib/routes.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const router = require('koa-route');
12 | const stringify = require('json-stringify-safe');
13 | const stripAnsi = require('strip-ansi');
14 |
15 | const prep = (data) => stringify(data);
16 |
17 | const statsOptions = {
18 | all: false,
19 | cached: true,
20 | children: true,
21 | hash: true,
22 | modules: true,
23 | timings: true,
24 | exclude: ['node_modules', 'bower_components', 'components']
25 | };
26 |
27 | const setupRoutes = function setupRoutes() {
28 | const { app, options } = this;
29 | const events = ['build', 'done', 'invalid', 'progress'];
30 | const connect = async (ctx) => {
31 | if (ctx.ws) {
32 | const socket = await ctx.ws();
33 | const send = (data) => {
34 | if (socket.readyState !== 1) {
35 | return;
36 | }
37 | socket.send(data);
38 | };
39 |
40 | socket.build = (compilerName = '', { wpsId }) => {
41 | send(prep({ action: 'build', data: { compilerName, wpsId } }));
42 | };
43 |
44 | socket.done = (stats, { wpsId }) => {
45 | const { hash } = stats;
46 |
47 | if (socket.lastHash === hash) {
48 | return;
49 | }
50 |
51 | send(prep({ action: 'done', data: { hash, wpsId } }));
52 |
53 | socket.lastHash = hash;
54 |
55 | const { errors = [], warnings = [] } = stats.toJson(statsOptions);
56 |
57 | if (errors.length || warnings.length) {
58 | send(
59 | prep({
60 | action: 'problems',
61 | data: {
62 | errors: errors.slice(0).map((e) => stripAnsi(e)),
63 | hash,
64 | warnings: warnings.slice(0).map((e) => stripAnsi(e)),
65 | wpsId
66 | }
67 | })
68 | );
69 |
70 | if (errors.length) {
71 | return;
72 | }
73 | }
74 |
75 | if (options.hmr || options.liveReload) {
76 | const action = options.liveReload ? 'reload' : 'replace';
77 | send(prep({ action, data: { hash, wpsId } }));
78 | }
79 | };
80 |
81 | socket.invalid = (filePath = '', compiler) => {
82 | const context = compiler.context || compiler.options.context || process.cwd();
83 | const fileName = (filePath && filePath.replace && filePath.replace(context, '')) || filePath;
84 | const { wpsId } = compiler;
85 |
86 | send(prep({ action: 'invalid', data: { fileName, wpsId } }));
87 | };
88 |
89 | socket.progress = (data) => {
90 | send(prep({ action: 'progress', data }));
91 | };
92 |
93 | for (const event of events) {
94 | this.on(event, socket[event]);
95 |
96 | socket.on('close', () => {
97 | this.removeListener(event, socket[event]);
98 | });
99 | }
100 |
101 | // #138. handle emitted events that don't have a listener registered, and forward the message
102 | // onto the client via the socket
103 | const unhandled = ({ eventName, data }) => send(prep({ action: eventName, data }));
104 | this.on('unhandled', unhandled);
105 | socket.on('close', () => {
106 | this.off('unhandled', unhandled);
107 | });
108 |
109 | send(prep({ action: 'connected' }));
110 | }
111 | };
112 |
113 | app.use(router.get('/wps', connect));
114 | };
115 |
116 | module.exports = { setupRoutes };
117 |
--------------------------------------------------------------------------------
/lib/server.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const url = require('url');
12 | const { createServer } = require('http');
13 |
14 | const open = require('open');
15 |
16 | const { getBuiltins } = require('./middleware');
17 | const { setupRoutes } = require('./routes');
18 |
19 | const select = (options, callback) => {
20 | /* eslint-disable global-require */
21 | const types = {
22 | http: createServer,
23 | https: require('https').createServer,
24 | http2: require('http2').createServer,
25 | http2Secure: require('http2').createSecureServer
26 | };
27 | const { http2, https } = options;
28 | let server;
29 | let secure = false;
30 |
31 | if (http2) {
32 | if (http2 === true) {
33 | server = types.http2({}, callback);
34 | } else if (http2.cert || http2.pfx) {
35 | secure = true;
36 | server = types.http2Secure(http2, callback);
37 | } else {
38 | server = types.http2(http2, callback);
39 | }
40 | } else if (https) {
41 | secure = true;
42 | server = types.https(https === true ? {} : https, callback);
43 | } else {
44 | server = types.http(callback);
45 | }
46 |
47 | return { secure, server };
48 | };
49 |
50 | const start = async function start() {
51 | if (this.listening) {
52 | return;
53 | }
54 |
55 | const { app } = this;
56 | const { host, middleware, port, waitForBuild } = this.options;
57 | const builtins = getBuiltins(app, this.options);
58 |
59 | this.options.host = await host;
60 | this.options.port = await port;
61 |
62 | if (waitForBuild) {
63 | app.use(async (ctx, next) => {
64 | await this.state.compiling;
65 | await next();
66 | });
67 | }
68 |
69 | // allow users to add and manipulate middleware in the config
70 | await middleware(app, builtins);
71 |
72 | // call each of the builtin middleware. methods are once'd so this has no ill-effects.
73 | for (const fn of Object.values(builtins)) {
74 | if (!fn.skip) {
75 | fn();
76 | }
77 | }
78 |
79 | setupRoutes.bind(this)();
80 |
81 | const { secure, server } = select(this.options, app.callback());
82 | const emitter = this;
83 |
84 | this.options.secure = secure;
85 |
86 | server.listen({ host: this.options.host, port: this.options.port });
87 |
88 | // wait for the server to fully spin up before asking it for details
89 | await {
90 | then(r, f) {
91 | server.on('listening', () => {
92 | emitter.emit('listening', server);
93 | r();
94 | });
95 | server.on('error', f);
96 | }
97 | };
98 |
99 | this.listening = true;
100 |
101 | const protocol = secure ? 'https' : 'http';
102 | const address = server.address();
103 |
104 | address.hostname = address.address;
105 |
106 | // fix #131 - server address reported as 127.0.0.1 for localhost
107 | if (address.hostname !== this.options.host && this.options.host === 'localhost') {
108 | address.hostname = this.options.host;
109 | }
110 |
111 | // we set this so the client can use the actual hostname of the server. sometimes the net
112 | // will mutate the actual hostname value (e.g. :: -> [::])
113 | this.options.address = url.format(address);
114 |
115 | const uri = `${protocol}://${this.options.address}`;
116 |
117 | this.log.info('Server Listening on:', uri);
118 |
119 | this.once('done', () => {
120 | if (this.options.open) {
121 | open(uri, this.options.open === true ? {} : this.options.open);
122 | }
123 | });
124 | };
125 |
126 | module.exports = { start };
127 |
--------------------------------------------------------------------------------
/lib/validate.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const {
12 | refine,
13 | any,
14 | nullable,
15 | type,
16 | partial,
17 | array,
18 | union,
19 | integer,
20 | max,
21 | boolean,
22 | string,
23 | func,
24 | literal,
25 | never,
26 | validate
27 | } = require('superstruct');
28 | const isPromise = require('is-promise');
29 |
30 | const promise = refine(any(), 'promise-like', (value) => isPromise(value));
31 |
32 | module.exports = {
33 | validate(options) {
34 | const schema = partial({
35 | allowMany: boolean(),
36 | client: partial({
37 | address: string(),
38 | protocol: union([literal('ws'), literal('wss')]),
39 | retry: boolean(),
40 | silent: boolean()
41 | }),
42 | compress: nullable(boolean()),
43 | headers: nullable(type({})),
44 | historyFallback: union([boolean(), type({})]),
45 | hmr: union([boolean(), literal('refresh-on-failure')]),
46 | host: nullable(union([promise, string()])),
47 | http2: union([boolean(), type({})]),
48 | https: nullable(type({})),
49 | liveReload: boolean(),
50 | log: partial({ level: string(), timestamp: boolean() }),
51 | middleware: func(),
52 | open: union([boolean(), type({})]),
53 | port: union([max(integer(), 65535), promise]),
54 | progress: union([boolean(), literal('minimal')]),
55 | publicPath: nullable(string()),
56 | ramdisk: union([boolean(), type({})]),
57 | secure: never(),
58 | static: nullable(
59 | union([string(), array(string()), partial({ glob: array(string()), options: type({}) })])
60 | ),
61 | status: boolean(),
62 | waitForBuild: boolean()
63 | });
64 | const [error, value] = validate(options, schema);
65 |
66 | return { error, value };
67 | }
68 | };
69 |
--------------------------------------------------------------------------------
/lib/ws.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright © 2018 Andrew Powell
3 |
4 | This Source Code Form is subject to the terms of the Mozilla Public
5 | License, v. 2.0. If a copy of the MPL was not distributed with this
6 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 |
8 | The above copyright notice and this permission notice shall be
9 | included in all copies or substantial portions of this Source Code Form.
10 | */
11 | const defer = require('p-defer');
12 | const WebSocket = require('ws');
13 |
14 | const socketServer = new WebSocket.Server({ noServer: true });
15 |
16 | /* eslint-disable no-param-reassign */
17 | const middleware = async (ctx, next) => {
18 | const deferred = defer();
19 | const { upgrade = '' } = ctx.request.headers;
20 | const upgradable = upgrade
21 | .split(',')
22 | .map((header) => header.trim())
23 | .includes('websocket');
24 |
25 | if (upgradable) {
26 | ctx.ws = async () => {
27 | socketServer.handleUpgrade(ctx.req, ctx.request.socket, Buffer.alloc(0), deferred.resolve);
28 | ctx.respond = false;
29 |
30 | return deferred.promise;
31 | };
32 | }
33 |
34 | await next();
35 | };
36 |
37 | module.exports = { middleware };
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-plugin-serve",
3 | "version": "1.6.0",
4 | "description": "A Development Server in a Webpack Plugin",
5 | "license": "MPL-2.0",
6 | "repository": "shellscape/webpack-plugin-serve",
7 | "author": "shellscape",
8 | "homepage": "https://github.com/shellscape/webpack-plugin-serve",
9 | "bugs": "https://github.com/shellscape/webpack-plugin-serve/issues",
10 | "bin": "",
11 | "main": "lib/index.js",
12 | "engines": {
13 | "node": ">= 10.0.0 < 10.14.0 || >= 10.15.0"
14 | },
15 | "scripts": {
16 | "ci:coverage": "nyc npm run test && nyc report --reporter=text-lcov > coverage.lcov",
17 | "ci:lint": "npm run lint && npm run security",
18 | "ci:lint:commits": "commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}",
19 | "ci:test": "npm run test -- --verbose --timeout=30000",
20 | "commitlint": "commitlint",
21 | "commitmsg": "commitlint -e $GIT_PARAMS",
22 | "dev": "npm run dev:clean && node node_modules/webpack-nano/bin/wp --config test/fixtures/simple/webpack.config.js",
23 | "dev:clean": "del test/fixtures/multi/output/* test/fixtures/simple/output/*",
24 | "dev:multi": "npm run dev:clean && node node_modules/webpack-nano/bin/wp --config test/fixtures/multi/webpack.config.js",
25 | "faq:toc": "echo 'temporarily disabled' # markdown-toc -i .github/FAQ.md",
26 | "lint": "eslint --fix --cache lib test",
27 | "lint-staged": "lint-staged",
28 | "security": "npm audit --audit-level=moderate",
29 | "test": "ava"
30 | },
31 | "files": [
32 | "client.js",
33 | "lib/",
34 | "README.md",
35 | "LICENSE"
36 | ],
37 | "peerDependencies": {
38 | "webpack": "^4.20.2 || ^5.0.0"
39 | },
40 | "dependencies": {
41 | "chalk": "^4.0.0",
42 | "connect-history-api-fallback": "^1.5.0",
43 | "escalade": "^3.1.0",
44 | "globby": "^11.0.0",
45 | "http-proxy-middleware": "^1.0.3",
46 | "is-path-cwd": "^2.2.0",
47 | "is-promise": "^4.0.0",
48 | "json-stringify-safe": "^5.0.1",
49 | "koa": "^2.5.3",
50 | "koa-compress": "^5.0.1",
51 | "koa-connect": "^2.0.1",
52 | "koa-route": "^3.2.0",
53 | "koa-static": "^5.0.0",
54 | "loglevelnext": "^4.0.1",
55 | "nanoid": "^3.1.3",
56 | "onetime": "^5.1.0",
57 | "open": "^7.0.3",
58 | "p-defer": "^3.0.0",
59 | "rimraf": "^3.0.2",
60 | "strip-ansi": "^6.0.0",
61 | "superstruct": "^0.12.1",
62 | "webpack-plugin-ramdisk": "^0.2.0",
63 | "ws": "^7.5.3"
64 | },
65 | "devDependencies": {
66 | "@commitlint/cli": "^11.0.0",
67 | "@commitlint/config-conventional": "^11.0.0",
68 | "ava": "^3.13.0",
69 | "cpy": "^8.1.0",
70 | "del": "^6.0.0",
71 | "del-cli": "^3.0.1",
72 | "eslint-config-shellscape": "^2.1.0",
73 | "execa": "^4.0.0",
74 | "get-port": "^5.1.1",
75 | "lint-staged": "^10.2.2",
76 | "make-dir": "^3.0.0",
77 | "node-fetch": "^2.6.1",
78 | "nyc": "^15.0.1",
79 | "pre-commit": "^1.2.2",
80 | "puppeteer": "^5.5.0",
81 | "random-js": "^2.1.0",
82 | "react-refresh": "^0.9.0",
83 | "webpack": "^4.44.2",
84 | "webpack-nano": "^1.0.0"
85 | },
86 | "keywords": [
87 | "dev",
88 | "development",
89 | "devserver",
90 | "serve",
91 | "server",
92 | "webpack"
93 | ],
94 | "ava": {
95 | "files": [
96 | "!**/fixtures/**",
97 | "!**/helpers/**",
98 | "!**/recipes/**"
99 | ]
100 | },
101 | "lint-staged": {
102 | "*.js": [
103 | "eslint --fix"
104 | ]
105 | },
106 | "nyc": {
107 | "include": [
108 | "lib/**/*.js"
109 | ],
110 | "exclude": [
111 | "lib/client*.js",
112 | "test/"
113 | ]
114 | },
115 | "pre-commit": "lint-staged"
116 | }
117 |
--------------------------------------------------------------------------------
/recipes/README.md:
--------------------------------------------------------------------------------
1 | ## 🍲 `webpack-plugin-serve` Recipies
2 |
3 | Recipes are snippets of code and useful tidbits that may be helpful to developers working to accomplish goals in similar scenarios. If you would like to submit a recipe, please open a `documentation` Pull Request.
4 |
5 | 🍳 What's Cooking:
6 |
7 | [Builtin Middlewares](./builtin-middleware.md){{message}}
2 |
--------------------------------------------------------------------------------
/recipes/angular/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
2 |
3 | h1 {
4 | font-family: 'Open Sans';
5 | font-size: 3rem;
6 | text-align: center;
7 | }
8 |
--------------------------------------------------------------------------------
/recipes/angular/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'message',
5 | styles: [require('./app.component.scss')],
6 | template: require('./app.component.html'),
7 | })
8 | export class HelloComponent {
9 | message = 'na na na na na na na na BATMAN!';
10 | }
11 |
--------------------------------------------------------------------------------
/recipes/angular/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {FormsModule} from '@angular/forms';
3 | import {BrowserModule} from '@angular/platform-browser';
4 | import {HelloComponent} from './app.component';
5 |
6 | @NgModule({
7 | imports: [BrowserModule, FormsModule ],
8 | bootstrap: [HelloComponent],
9 | declarations: [HelloComponent],
10 | })
11 | export class AppModule {}
12 |
--------------------------------------------------------------------------------
/recipes/angular/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Webpack Plugin Serve Recipe: Angular
6 |
7 |
8 | loading...
9 |
10 |
11 |
--------------------------------------------------------------------------------
/recipes/angular/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | import 'core-js/es7/reflect';
2 | import 'zone.js/dist/zone';
3 |
--------------------------------------------------------------------------------
/recipes/angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "es2015",
4 | "target": "es5",
5 | "moduleResolution": "node",
6 | "experimentalDecorators": true,
7 | "emitDecoratorMetadata": true,
8 | "lib": [
9 | "es2015",
10 | "dom"
11 | ],
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "noImplicitAny": true,
16 | "sourceMap": true,
17 | "suppressImplicitAnyIndexErrors": true
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/recipes/angular/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "error",
3 | "jsRules": {},
4 | "rules": {
5 | "arrow-return-shorthand": true,
6 | "interface-over-type-literal": true,
7 | "no-string-literal": true,
8 | "no-unnecessary-type-assertion": true,
9 | "object-literal-shorthand": true,
10 | "ordered-imports": true,
11 | "prefer-const": [true, { "destructuring": "all" }],
12 | "prefer-object-spread": true,
13 | "quotemark": [true, "single", "avoid-escape", "avoid-template"]
14 | },
15 | "rulesDirectory": []
16 | }
--------------------------------------------------------------------------------
/recipes/angular/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const { ContextReplacementPlugin } = require('webpack');
5 | const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
6 |
7 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve/client');
8 |
9 | const outputPath = path.resolve(__dirname, 'dist');
10 | const watch = process.env.SERVE === 'true';
11 |
12 | module.exports = {
13 | entry: {
14 | polyfills: './src/polyfills.ts',
15 | main: ['./src/app.ts', 'webpack-plugin-serve/client']
16 | },
17 | mode: 'development',
18 | module: {
19 | rules: [
20 | {
21 | test: /\.ts$/,
22 | loader: 'awesome-typescript-loader'
23 | },
24 | {
25 | test: /\.ts$/,
26 | enforce: 'pre',
27 | loader: 'tslint-loader'
28 | },
29 | {
30 | test: /\.html$/,
31 | loader: 'html-loader'
32 | },
33 | {
34 | test: /\.scss$/,
35 | loader: ['raw-loader', 'sass-loader?sourceMap']
36 | }
37 | ]
38 | },
39 | optimization: {
40 | splitChunks: {
41 | cacheGroups: {
42 | vendor: {
43 | chunks: 'initial',
44 | name: 'vendor',
45 | test: 'vendor'
46 | }
47 | }
48 | }
49 | },
50 | output: {
51 | // output directory
52 | path: outputPath,
53 | // name of the generated bundle
54 | filename: '[name].js'
55 | },
56 | plugins: [
57 | new ContextReplacementPlugin(
58 | /@angular(\\|\/)core(\\|\/)fesm5/,
59 | path.resolve(__dirname, 'src'),
60 | {}
61 | ),
62 | new FilterWarningsPlugin({
63 | exclude: /System.import/
64 | }),
65 | new HtmlWebpackPlugin({
66 | template: 'src/index.html',
67 | inject: 'body'
68 | }),
69 | new Serve({
70 | historyFallback: true,
71 | hmr: false,
72 | liveReload: true,
73 | static: [outputPath]
74 | })
75 | ],
76 | resolve: {
77 | extensions: ['.js', '.ts']
78 | },
79 | watch
80 | };
81 |
--------------------------------------------------------------------------------
/recipes/bonjour-broadcast.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Bonjour Broadcast
2 |
3 | Bonjour is a popular choice for cross-network eventing. On systems or networks where an actor is awaiting an event to perform a particular action, events for `webpack-plugin-serve` can be leveraged to initiate a broadcast.
4 |
5 | ### Meat and Potatoes
6 |
7 | To get started, your `webpack` configuration should already be setup and building successfully without using `webpack-plugin-serve`. Next, you'll need the `bonjour` package installed:
8 |
9 | ```console
10 | $ npm install bonjour --save-dev
11 | ```
12 |
13 | Next, let's get the plugin setup, and the events wired up for broadcasting:
14 |
15 | ```js
16 | const bonjour = require('bonjour')();
17 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
18 |
19 | const serve = new Serve();
20 | const port = 3000; // or whichever port your services are running on
21 | const type = 'http';
22 |
23 | serve.on('listening', () => {
24 | bonjour.publish({ name: 'Batman is Listening', port, type });
25 | });
26 |
27 | module.exports = {
28 | ...,
29 | plugins: [serve],
30 | ...
31 | };
32 | ```
33 |
34 | There's certainly more than can be done with a `bonjour` broadcasting setup, but that's the bare basics of how to get it working with this plugin.
35 |
36 | If you find that your system requires clearing, or unpublishing, pending messages, you might choose to flush them when the process ends:
37 |
38 | ```js
39 | process.on('exit', () => bonjour.unpublishAll(bonjour.destroy));
40 | ```
41 |
42 | You'll find far more information on the capabilities of the `bonjour` module [in its documentation](https://www.npmjs.com/package/bonjour).
43 |
44 | ### 🍰 Dessert
45 |
46 | Go forth, and imbibe!
47 |
--------------------------------------------------------------------------------
/recipes/builtin-middleware.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Built-in Middleware
2 |
3 | Built-in middleware provides access to all of the underlying middleware that the plugin uses internally. This provides users with a maximum amount of control over behavior of the server when leveraging the `middleware` option.
4 |
5 | ### Meat and Potatoes
6 |
7 | To leverage built-in middleware, the available middleware methods need but be called with corresponding parameters from the [`Options`](../README.md#options) list. For example, if we were to want to use the `static` middleware, we'd call `builtins.static` with parameters that matched the [`static`](../README.md#static) option:
8 |
9 | ```js
10 | // webpack.config.js
11 | module.exports = {
12 | plugins: [
13 | new WebpackPluginServe({
14 | middleware: (app, builtins) =>
15 | const glob = [
16 | 'dist/**/public',
17 | 'dist/app/*'
18 | ];
19 | builtins.static({ glob });
20 | })
21 | ]
22 | };
23 | ```
24 |
25 | _Note: There is no need to interact with `app`. The underlying method takes care of wiring up to `app.use`._
26 |
27 | The same holds true for all of the available built-in middleware methods, except for `builtins.proxy`, which we'll cover in Dessert below. Currently supported built-in middleware that are available on the `builtins` parameter are:
28 |
29 | `compress` → forwards to [koa-compress](https://github.com/koajs/compress)React App
23 |
24 |
25 | You need to enable JavaScript to run this app.
26 |
27 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/recipes/create-react-app/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/recipes/create-react-app/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/recipes/create-react-app/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { hot } from 'react-hot-loader/root'
3 | import logo from './logo.svg';
4 | import './App.css';
5 |
6 | function App() {
7 | return (
8 |
24 | );
25 | }
26 |
27 | export default hot(App);
28 |
--------------------------------------------------------------------------------
/recipes/create-react-app/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/recipes/create-react-app/webpack.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Merely reads the webpack config from react-scripts and exports the re-wired
3 | * config
4 | */
5 | const { paths } = require('react-app-rewired');
6 | const configFromEnv = require(paths.scriptVersion + '/config/webpack.config');
7 | const overrides = require('./config-overrides');
8 |
9 | const env = process.env.NODE_ENV || 'development';
10 | const config = configFromEnv(env);
11 |
12 | module.exports = overrides.webpack(configFromEnv(config), env);
13 |
--------------------------------------------------------------------------------
/recipes/custom-headers.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Sending Custom Headers for Requests
2 |
3 | _(Update: As of v0.9.0, users may set Custom Headers using the `headers` option)_
4 |
5 | Occasionally a development environment needs to mirror certain aspects of the production environment. That may mean adding custom headers to each request the server responds to. With `webpack-plugin-serve` you have two ways to do that: using [Koa](https://koajs.com) underpinnings or our custom middleware.
6 |
7 | ### Meat and Potatoes
8 |
9 | To get started, your `webpack` configuration should already be setup and building successfully without using `webpack-plugin-serve`. Next, let's get the plugin setup for custom headers using `koa` options directly:
10 |
11 | ```js
12 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
13 |
14 | // webpack.config.js
15 | module.exports = {
16 | plugins: [
17 | new Serve({
18 | middleware: (app, builtins) =>
19 | app.use(async (ctx, next) => {
20 | await next();
21 | ctx.set('X-Superhero', 'batman');
22 | })
23 | })
24 | ]
25 | };
26 | ```
27 |
28 | Notice that we're tapping into the middleware chain to do our thing. In this example, we're adding a `X-Superhero: batman` header via `ctx.set('X-Superhero', 'batman');`. And that's about all there is to it.
29 |
30 | Or you could just use a simple `builtin` function we have added. To use this helper you just need an object containing all the headers and its values.
31 |
32 | ```js
33 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
34 |
35 | // webpack.config.js
36 | module.exports = {
37 | plugins: [
38 | new Serve({
39 | middleware: (app, builtins) =>
40 | builtins.headers({
41 | "X-Superhero": "batman"
42 | })
43 | })
44 | ]
45 | };
46 | ```
47 |
48 | ### 🍰 Dessert
49 |
50 | You deserve some cookies (or biscuits or whatever they're called in your neck of the woods).
51 |
--------------------------------------------------------------------------------
/recipes/dynamic-port.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Using a Dynamic Port
2 |
3 | Most of the time using a static, predefined port number will work just fine. There can be situations in which fetching an unused, free port for use with `webpack-plugin-server` can come in handy. We're going to use the [get-port](https://www.npmjs.com/package/get-port) module to demonstrate how that can be set that up with `webpack-plugin-serve`.
4 |
5 | ### Meat and Potatoes
6 |
7 | To get started, your `webpack` configuration should already be setup and building successfully without using `webpack-plugin-serve`. Next, let's get the plugin setup:
8 |
9 | ```js
10 | const getPort = require('get-port');
11 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
12 |
13 | module.exports = {
14 | ...,
15 | plugins: [new Serve({
16 | port: getPort()
17 | })],
18 | ...
19 | };
20 | ```
21 |
22 | Pretty straight-forward, right? Now, there's lots of magic going on here that users don't need to futz with; the big take-away here is that the `port` option accepts a `Promise` as a value, and `getPort` returns a `Promise`. Nothing more there to do! Bueno. Bien. Gut. 好.
23 |
24 | _Note: It's worth checking out the docs for `get-port`. You'll find that it accepts a few different options including setting a preferred port that it will default to if the port number is free._
25 |
26 | ### 🍰 Dessert
27 |
28 | And there you have it. We have a sample app that will get an available port number and use that as the server's port. Cheers, and good eating.
29 |
--------------------------------------------------------------------------------
/recipes/entry-points.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Configuring `entry` With webpack-plugin-serve
2 |
3 | There are multiple patterns available for configuring the entry point for a `webpack` bundle, and these are [fairly well documented](https://webpack.js.org/concepts/entry-points/). However, adding an additional resource to an entry, as required by `webpack-plugin-serve`, may not be straight-forward for users unfamiliar with configuration customization. We'll outline several different methods below.
4 |
5 | ### Meat and Potatoes
6 |
7 | Consider the following `webpack` configurations, before and after adding the `webpack-plugin-serve` client entry:
8 |
9 | #### A single `String` entry
10 |
11 | ```js
12 | // before
13 | module.exports = {
14 | entry: 'dist/bundle.js'
15 | };
16 | ```
17 |
18 | ```js
19 | // after
20 | module.exports = {
21 | entry: ['dist/bundle.js', 'webpack-plugin-serve/client']
22 | };
23 | ```
24 |
25 | #### An `Array` of `String` entry
26 |
27 | ```js
28 | // before
29 | module.exports = {
30 | entry: [
31 | 'dist/bundle.js',
32 | 'dist/worker.js'
33 | ]
34 | };
35 | ```
36 |
37 | ```js
38 | // after
39 | module.exports = {
40 | entry: [
41 | 'dist/bundle.js',
42 | 'dist/worker.js',
43 | 'webpack-plugin-serve/client'
44 | ]
45 | };
46 | ```
47 |
48 | #### An `Object` of defining a single `String` entry
49 |
50 | ```js
51 | // before
52 | module.exports = {
53 | entry: {
54 | main: 'dist/bundle.js'
55 | }
56 | };
57 | ```
58 |
59 | ```js
60 | // after
61 | module.exports = {
62 | entry: {
63 | main: ['dist/bundle.js', 'webpack-plugin-serve/client']
64 | }
65 | };
66 | ```
67 |
68 | #### An `Object` of defining multiple `String` entries
69 |
70 | If there are multiple entry points defined for your bundle, and you'd like each entry point to support features like Hot Module Reloading, the `webpack-plugin-serve` client script must be added to each:
71 |
72 | ```js
73 | // before
74 | module.exports = {
75 | entry: {
76 | main: 'dist/bundle.js',
77 | worker: 'dist/worker.js'
78 | }
79 | };
80 | ```
81 |
82 | ```js
83 | // after
84 | module.exports = {
85 | entry: {
86 | main: ['dist/bundle.js', 'webpack-plugin-serve/client'],
87 | worker: ['dist/worker.js', 'webpack-plugin-serve/client']
88 | }
89 | };
90 | ```
91 |
92 | ### 🍰 Dessert
93 |
94 | The examples above outline how the `webpack-plugin-serve/client` script can be added to several common `entry` patterns. The important bit is that the value, whether it be a single entry point or an `Object` with properties, be transformed into an array which includes an item with the `webpack-plugin-serve` client script. Cheers, and good eating.
95 |
--------------------------------------------------------------------------------
/recipes/four0four.md:
--------------------------------------------------------------------------------
1 | ## Four0Four
2 | A middleware that handles requests that result in a 404 status
3 |
4 | ### Meat and Potatoes
5 | It requires a function that receives the `Koa` context! This function is executed every time the server receives a `404` error.
6 |
7 | With this middleware you can for example render a custom 404 page.
8 |
9 | ```js
10 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
11 |
12 | module.exports = {
13 | ...,
14 | plugins: [new Serve({
15 | middleware: (app, builtins) => {
16 | builtins.four0four((ctx) => {
17 | // render Custom error page
18 | // do something else.
19 | })
20 | }
21 | })],
22 | ...
23 | };
24 |
25 | ```
26 |
27 | ### 🍰 Dessert
28 |
29 | You deserve some cookies (or biscuits or whatever they're called in your neck of the woods).
30 |
--------------------------------------------------------------------------------
/recipes/internal-ip.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Using an Internal IP Address
2 |
3 | When on systems or setups which limit use of `localhost`, or in scenarios where the server should listen on the address of the internet-facing interface, the host can be set dynamically. We're going to use the [internal-ip](https://www.npmjs.com/package/internal-ip) module to demonstrate how to set that up with `webpack-plugin-serve`.
4 |
5 | ### Meat and Potatoes
6 |
7 | To get started, your `webpack` configuration should already be setup and building successfully without using `webpack-plugin-serve`. Next, let's get the plugin setup:
8 |
9 | ```js
10 | const internalIp = require('internal-ip');
11 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
12 |
13 | module.exports = {
14 | ...,
15 | plugins: [new Serve({
16 | host: internalIp.v4()
17 | })],
18 | ...
19 | };
20 | ```
21 |
22 | Pretty straight-forward, right? Now, there's lots of magic going on here that users don't need to futz with; the big take-away here is that the `host` option accepts a `Promise` as a value, and `internalIp.v4()` returns a `Promise`. Nothing more there to do! Bueno. Bien. Gut. 好.
23 |
24 | _Note: It's worth checking out the docs for `internal-ip`. You'll find that it also supports getting the IPv6 address if you'd rather use that._
25 |
26 | ### 🍰 Dessert
27 |
28 | And there you have it. We have a sample app that will load the IP of the local machine and use that as the server's host. Cheers, and good eating.
29 |
--------------------------------------------------------------------------------
/recipes/multi-compiler.md:
--------------------------------------------------------------------------------
1 | ## 🍲 MultiCompiler Configurations
2 |
3 | TODO: Note about secondary compilers needing refresh on change
4 |
5 |
6 | ### Meat and Potatoes
7 |
8 |
9 |
10 | ### 🍰 Dessert
11 |
12 | You deserve some cookies (or biscuits or whatever they're called in your neck of the woods).
13 |
--------------------------------------------------------------------------------
/recipes/multi-entry.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Setting up Multiple entries
2 |
3 | Certain applications or bundles may require several separate entries. Depending on a user's needs, it may be desirable to make Hot Module Replacement, live-reload, or any other client feature available for each entries, or specific entries other than the default. To accomplish that, the `webpack-plugin-serve/client` file must be included with entries on which client features are needed. We'll show you how that should look below.
4 |
5 |
6 | ### Meat and Potatoes
7 |
8 | Let's say for this example that you have an application which bundles two pages and a web worker separately:
9 |
10 | ```js
11 |
12 |
13 | module.exports = {
14 | entry: {
15 | landing: './landing.js',
16 | checkout: './checkout.js',
17 | worker: './worker.js'
18 | },
19 | // ...rest of your config
20 | };
21 | ```
22 |
23 | ### Making the Meal
24 |
25 | We'll now add the client script to the entries we'd like to have client-side features added to:
26 |
27 | ```js
28 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
29 |
30 | const serve = new Serve();
31 |
32 | module.exports = {
33 | entry: {
34 | landing: ['./landing.js', 'webpack-plugin-serve/client'],
35 | checkout: './checkout.js',
36 | worker: ['./worker.js', 'webpack-plugin-serve/client']
37 | },
38 | // ...rest of your config
39 | };
40 | ```
41 |
42 | Note that we left the client script off of one of the entries. It's not required that _all entries_ have the client script - only those you wish to use the client-side features for.
43 |
44 |
45 | ### 🍰 Dessert
46 |
47 | Go forth with a full belly and contentment, for you've enabled client-side goodies for your entries.
48 |
--------------------------------------------------------------------------------
/recipes/open-custom-uri.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Opening a Custom URI
2 |
3 | The [`open`](https://github.com/shellscape/webpack-plugin-serve#open) option provides users with the ability to instruct the plugin to open the root URI of an application after the server begins listening. In some circumstances users might need to open a custom URI. This can be done relatively quickly.
4 |
5 | _Note: `webpack-plugin-serve` endeavors to directly pass-through options for dependencies, rather than wrap custom options sets, parse them, and pass them onto dependencies. Such is the case for the `open` module and the `open` option._
6 |
7 | ### Meat and Potatoes
8 |
9 | To get started, your `webpack` configuration should already be setup and building successfully without using `webpack-plugin-serve`. Next, let's get the plugin setup for opening a custom URI:
10 |
11 | ```js
12 | const open = require('open');
13 | const { WebpackPluginServe } = require('webpack-plugin-serve');
14 |
15 | const serve = new WebpackPluginServe();
16 |
17 | // we'll listen for the `listening` event, which tells us the server is up and running
18 | serve.on('listening', () => {
19 | const uri = 'http://localhost:5555/#/local';
20 | const opts = {};
21 | open(uri, opts);
22 | });
23 |
24 | // webpack.config.js
25 | module.exports = {
26 | plugins: [ serve ]
27 | };
28 | ```
29 |
30 | And that's all there is to it.
31 |
32 | ### 🍰 Dessert
33 |
34 | You deserve some cookies (or biscuits or whatever they're called in your neck of the woods).
35 |
--------------------------------------------------------------------------------
/recipes/proxies.md:
--------------------------------------------------------------------------------
1 | ## 🍲 Proxies
2 |
3 | Proxying some URLs can be useful when you have an API backend server and you want to send API requests on the same domain or if during development you wan't to simulate the correct urls that are going to work in a real scenario.
4 |
5 | Proxying is supported via [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) module but it doesn't contain any fancy options processing for proxying it just provides access directly.
6 |
7 | _Note: The `app.use(...)` call here is slightly different than what Express users are used to seeing with `http-proxy-middleware`. This is due to subtle differences in how the module interacts with `Koa`, which is used under the hood in this plugin._
8 |
9 | ### Meat and Potatoes
10 |
11 | To get started, your `webpack` configuration should be setup and building successfully. Next, you have to know which local path you wan't to proxy to which location target. We are going to setup this using the middleware option.
12 |
13 | _Note: We assume that the configuration for `webpack-plugin-serve` is the dafault one, i.e, `port:55555` and `host:localhost`_
14 |
15 | #### Simple route
16 |
17 | We want to proxy our local urls (`/api`) to `http://localhost:3000`. When a request to `localhost:55555/api` is done, it is going to be proxied to `localhost:3000/api`.
18 |
19 | ```js
20 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
21 |
22 | module.exports = {
23 | ...,
24 | plugins: [new Serve({
25 | middleware: (app, builtins) => {
26 | app.use(builtins.proxy('/api', {
27 | target: 'http://localhost:3000'
28 | }))
29 | }
30 | })],
31 | ...
32 | };
33 |
34 | ```
35 |
36 | Since `builtins.proxy` gives you access to `http-proxy-middleware`, you can doanything `http-proxy-middleware` accepts.
37 |
38 | This will proxy everything from `localhost:55555/api` to `localhost:3000/api`
39 |
40 | #### Path Rewrite
41 |
42 | Now, let's say you don't want to proxy to the same path that your local path, when requesting to `/api` you want to proxy to `localhost:3000` directly instead. You are looking for one of the `http-proxy-middleware` options that is called `pathRewrite`.
43 |
44 | ```js
45 | module.exports = {
46 | ...,
47 | plugins: [new Serve({
48 | middleware: (app, builtins) => {
49 | app.use(builtins.proxy('/api', {
50 | target: 'http://localhost:3000',
51 | pathRewrite: {
52 | '/api': ''
53 | }
54 | }))
55 | }
56 | })],
57 | ...
58 | };
59 | ```
60 |
61 | When you request to `locahost:55555/api` it is going to be proxied to `localhost:3000` instead. Now you don't need to have the prefix `/api` on your target server to make it work.
62 |
63 | Simple? Don't you think? You can simply look at [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware) docs if you have any doubts.
64 |
65 | ### 🍰 Dessert
66 |
67 | And there you have it. Now you can proxy a different server into your local domain!
68 |
--------------------------------------------------------------------------------
/recipes/react-ssr/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parserOptions": {
3 | "ecmaVersion": 9,
4 | "sourceType": "module",
5 | "ecmaFeatures": {
6 | "jsx": true,
7 | "modules": true
8 | }
9 | },
10 | "rules": {
11 | "import/no-extraneous-dependencies": "off",
12 | "import/no-unresolved": "off",
13 | "no-unused-vars": "off"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/recipes/react-ssr/README.md:
--------------------------------------------------------------------------------
1 | ## 🍲 React App With SSR
2 |
3 | No so feature-rich react example, but with server-side rendering and server hot reloading
4 |
--------------------------------------------------------------------------------
/recipes/react-ssr/client/Root.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Root() {
4 | return Hello world!!! ;
5 | }
6 |
--------------------------------------------------------------------------------
/recipes/react-ssr/client/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import Root from './Root';
5 |
6 | const elem = document.getElementById('react');
7 |
8 | ReactDOM.hydrate(${markup}
14 |
15 |
16 |
17 | `;
18 | }
19 |
20 | module.exports = async (ctx, next) => {
21 | ctx.body = `${render()}`;
22 | await next();
23 | };
24 |
--------------------------------------------------------------------------------
/recipes/react-ssr/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
4 | const importFresh = require('import-fresh');
5 | const nodeExternals = require('webpack-node-externals');
6 |
7 | const SRC_DIR_CLIENT = path.resolve(__dirname, 'client');
8 | const SRC_DIR_SERVER = path.resolve(__dirname, 'server');
9 | const DIST_DIR = path.resolve(__dirname, 'dist');
10 |
11 | const serve = new Serve({
12 | port: 3000,
13 | static: [DIST_DIR],
14 | waitForBuild: true,
15 | middleware(app) {
16 | app.use(async (ctx, next) => {
17 | const renderer = importFresh(path.resolve(DIST_DIR, 'server.js'));
18 | await renderer(ctx, next);
19 | });
20 | }
21 | });
22 |
23 | function createConfig(opts) {
24 | const { name } = opts;
25 | const isServer = name === 'server';
26 | const optimize = process.env.NODE_ENV === 'production';
27 |
28 | return {
29 | name,
30 | mode: optimize ? 'production' : 'development',
31 | entry: isServer
32 | ? { server: './server/main.js' }
33 | : { client: ['./client/index.js', ...(optimize ? [] : ['webpack-plugin-serve/client'])] },
34 | output: {
35 | path: DIST_DIR,
36 | filename: '[name].js',
37 | libraryTarget: isServer ? 'commonjs2' : 'var'
38 | },
39 | module: {
40 | rules: [
41 | {
42 | test: /\.js$/,
43 | include: [SRC_DIR_SERVER, SRC_DIR_CLIENT],
44 | use: [
45 | {
46 | loader: 'babel-loader',
47 | options: {
48 | presets: [
49 | [
50 | '@babel/preset-env',
51 | {
52 | modules: false,
53 | targets: isServer ? { node: 'current' } : '> 0.5%, last 2 versions, not dead'
54 | }
55 | ],
56 | ['@babel/preset-react', { development: !optimize }]
57 | ]
58 | }
59 | }
60 | ]
61 | }
62 | ]
63 | },
64 | plugins: [isServer ? serve.attach() : serve],
65 | target: isServer ? 'node' : 'web',
66 | ...(isServer ? { externals: nodeExternals() } : {}),
67 | watch: !isServer && !optimize
68 | };
69 | }
70 |
71 | module.exports = [
72 | createConfig({
73 | name: 'client'
74 | }),
75 | createConfig({
76 | name: 'server'
77 | })
78 | ];
79 |
--------------------------------------------------------------------------------
/recipes/react/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react"
5 | ],
6 | "plugins": [
7 | "react-hot-loader/babel"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/recipes/react/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parserOptions": {
3 | "ecmaVersion": 6,
4 | "sourceType": "module",
5 | "ecmaFeatures": {
6 | "jsx": true,
7 | "modules": true
8 | }
9 | },
10 | "rules": {
11 | "import/no-extraneous-dependencies": "off",
12 | "import/no-unresolved": "off",
13 | "no-unused-vars": "off"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/recipes/react/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Dan Abramov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/recipes/react/README.md:
--------------------------------------------------------------------------------
1 | ## 🍲 React App
2 |
3 | In addition to individual recipes for feature implementation, it's often useful for folks at many levels of experience to see a framework wired up and functional with the plugin. This recipe combines a simple "Hello World" style [React](https://reactjs.org) application with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin), [react-hot-loader](https://github.com/gaearon/react-hot-loader) and `webpack-plugin-serve`. This project also has initial setup for fonts, images and css.
4 |
5 | This recipe leverages [webpack-nano](https://github.com/shellscape/webpack-nano), a very tiny, very clean webpack CLI.
6 |
7 | ## Meta
8 |
9 | This recipe was heavily inspired by https://github.com/gaearon/react-hot-loader/tree/master/examples/webpack-modern and some modifications made based on experience and personal preference. The original is licensed under MIT.
10 |
--------------------------------------------------------------------------------
/recipes/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-app",
3 | "version": "1.0.0",
4 | "description": "A webpack-plugin-serve Recipe",
5 | "repository": "shellscape/webpack-plugin-serve/recipes/react",
6 | "main": "index.js",
7 | "engines": {
8 | "node": ">= 10.11.0"
9 | },
10 | "scripts": {
11 | "start": "cross-env NODE_ENV=development wp --config ./webpack.config",
12 | "build": "cross-env NODE_ENV=production wp --config ./webpack.config"
13 | },
14 | "license": "MIT",
15 | "devDependencies": {
16 | "@babel/core": "^7.1.2",
17 | "@babel/polyfill": "^7.0.0",
18 | "@babel/preset-env": "^7.1.0",
19 | "@babel/preset-react": "^7.0.0",
20 | "babel-loader": "^8.0.4",
21 | "cross-env": "^5.2.0",
22 | "css-loader": "^3.2.0",
23 | "file-loader": "^4.2.0",
24 | "html-webpack-plugin": "^3.2.0",
25 | "react": "^16.6.0",
26 | "react-dom": "^16.6.0",
27 | "react-hot-loader": "^4.3.11",
28 | "style-loader": "^1.0.0",
29 | "url-loader": "^2.1.0",
30 | "webpack": "^4.23.1",
31 | "webpack-nano": "^0.7.1",
32 | "webpack-plugin-serve": "^0.12.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/recipes/react/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { hot } from 'react-hot-loader';
3 | import './style.css';
4 |
5 | const App = () => Hi my world ;
6 |
7 | export default hot(module)(App);
8 |
--------------------------------------------------------------------------------
/recipes/react/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './App';
5 |
6 | const render = () => {
7 | const root = document.createElement('div');
8 | document.body.appendChild(root);
9 |
10 | ReactDOM.render(Hello {children}
;
6 | }
7 |
8 | App.propTypes = {
9 | children: PropTypes.node
10 | };
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/recipes/refresh-on-failure/src/another.js:
--------------------------------------------------------------------------------
1 | const name = 'world';
2 |
3 | export default name;
4 |
--------------------------------------------------------------------------------
/recipes/refresh-on-failure/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 |
4 | import App from './App.jsx';
5 | import name from './another';
6 |
7 | render({name} , document.getElementById('app'));
8 |
--------------------------------------------------------------------------------
/recipes/refresh-on-failure/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
4 | const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
5 |
6 | const { WebpackPluginServe: Serve } = require('../../');
7 |
8 | module.exports = {
9 | mode: 'development',
10 | entry: ['./src', '../../client'],
11 | plugins: [
12 | new Serve({ hmr: 'refresh-on-failure', static: ['./dist'], status: false }),
13 | new ReactRefreshPlugin({
14 | overlay: false
15 | }),
16 | new MiniHtmlWebpackPlugin({
17 | context: {
18 | body: '
'
19 | }
20 | })
21 | ],
22 | module: {
23 | rules: [
24 | {
25 | test: /\.jsx?$/,
26 | include: path.join(__dirname, 'src'),
27 | use: 'babel-loader'
28 | }
29 | ]
30 | },
31 | resolve: {
32 | extensions: ['.js', '.jsx']
33 | },
34 | watch: true
35 | };
36 |
--------------------------------------------------------------------------------
/recipes/static-html-files.md:
--------------------------------------------------------------------------------
1 | ## Static HTML Files
2 |
3 | When setting up an HTML file to bootstrap a Single Page Application users typically choose between two popular options:
4 |
5 | 1. [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
6 | 1. A static HTML file
7 |
8 | This recipe addresses setting up a static HTML file, rather than using a plugin to generate an HTML file to serve a bundle.
9 |
10 | ### Meat and Potatoes
11 |
12 | To get started, your `webpack` configuration should be setup and building successfully. Once that's done, you'll need to create an HTML file somewhere in your project directory structure. Be sure to place the file _outside of the `output` directory_.
13 |
14 | Let's use the following directory structure as an example:
15 |
16 | ```
17 | /the-app
18 | |_ dist
19 | |_ js
20 | |_ app.js
21 | |_ static
22 | |_ index.html
23 | ```
24 |
25 | Where `/the-app/dist` is the `output` webpack output directory. A configuration for this example setup would then resemble the following:
26 |
27 | ```js
28 | const path = require('path');
29 | const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
30 | const outputPath = path.resolve('./dist');
31 |
32 | module.exports = {
33 | entry: ['./js/app.js', 'webpack-plugin-serve/client'],
34 | output: {
35 | filename: 'bundle.js'
36 | path: outputPath
37 | },
38 | plugins: [
39 | new Serve({
40 | static: [outputPath, path.resolve('./static')]
41 | })
42 | ]
43 | }
44 | ```
45 |
46 | An HTML file for this setup might resemble:
47 |
48 | ```html
49 |
50 |
51 |
52 | fixture: https
5 |
6 |
7 | fixture: multicompiler
5 |
6 |
7 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/test/fixtures/multi/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path');
2 |
3 | const { getPort } = require('../../helpers/port');
4 |
5 | const { WebpackPluginServe: Serve } = require('../../../lib/');
6 |
7 | const serve = new Serve({
8 | host: 'localhost',
9 | port: getPort()
10 | });
11 |
12 | module.exports = [
13 | {
14 | context: __dirname,
15 | entry: ['./app.js', 'webpack-plugin-serve/client'],
16 | mode: 'development',
17 | output: {
18 | filename: './dist-app.js',
19 | path: resolve(__dirname, './output'),
20 | publicPath: 'output/'
21 | },
22 | plugins: [serve],
23 | resolve: {
24 | alias: {
25 | 'webpack-plugin-serve/client': resolve(__dirname, '../../../client')
26 | }
27 | },
28 | watch: true
29 | },
30 | {
31 | context: __dirname,
32 | entry: ['./worker.js', 'webpack-plugin-serve/client'],
33 | mode: 'development',
34 | output: {
35 | filename: './dist-worker.js',
36 | path: resolve(__dirname, './output'),
37 | publicPath: 'output/'
38 | },
39 | plugins: [serve.attach()],
40 | resolve: {
41 | alias: {
42 | 'webpack-plugin-serve/client': resolve(__dirname, '../../../client')
43 | }
44 | }
45 | }
46 | ];
47 |
--------------------------------------------------------------------------------
/test/fixtures/multi/work.js:
--------------------------------------------------------------------------------
1 | const main = document.querySelector('#worker');
2 | main.innerHTML = 'worker';
3 |
4 | // console.log(require);
5 |
--------------------------------------------------------------------------------
/test/fixtures/multi/worker.js:
--------------------------------------------------------------------------------
1 | require('./work');
2 |
3 | if (module.hot) {
4 | module.hot.accept((err) => {
5 | if (err) {
6 | console.error('HMR', err);
7 | }
8 | });
9 | }
10 |
11 | // uncomment to produce a build error
12 | // if (!window) {
13 | // require('tests');
14 | // }
15 |
16 | // uncomment to produce a build warning
17 | // console.log(require);
18 |
--------------------------------------------------------------------------------
/test/fixtures/proxy/app.js:
--------------------------------------------------------------------------------
1 | require('./component');
2 |
3 | if (module.hot) {
4 | module.hot.accept((err) => {
5 | if (err) {
6 | console.error('HMR', err);
7 | }
8 | });
9 | }
10 |
--------------------------------------------------------------------------------
/test/fixtures/proxy/component.js:
--------------------------------------------------------------------------------
1 | const main = document.querySelector('main');
2 | main.innerHTML = 'main...';
3 |
--------------------------------------------------------------------------------
/test/fixtures/proxy/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | fixture: simple
5 |
6 |
7 | fixture: single
5 |
6 |
7 | fixture: single
5 |
6 |
7 | 
11 |