@digest/webpack 3.4.2 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -7,327 +7,33 @@
7
7
  </div>
8
8
 
9
9
  <div align="center">
10
- <a href="https://commitizen.github.io/cz-cli/"><img alt="Commitizen Friendly" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000" /></a>
11
- <a href="https://github.com/semantic-release/semantic-release"><img alt="Semantic Release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?maxAge=2592000" /></a>
10
+ <a href="https://commitizen.github.io/cz-cli/"><img alt="Commitizen Friendly" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000" /></a>
11
+ <a href="https://github.com/semantic-release/semantic-release"><img alt="Semantic Release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?maxAge=2592000" /></a>
12
12
  </div>
13
13
 
14
14
  <div align="center">
15
- <a href="https://gitlab.com/digested/node-digest/commits/master"><img alt="Build Status" src="https://gitlab.com/digested/node-digest/badges/master/build.svg" /></a>
16
- <a href="https://digested.gitlab.io/node-digest/coverage"><img alt="Coverage Report" src="https://gitlab.com/digested/node-digest/badges/master/coverage.svg" /></a>
17
- <a href="https://www.npmjs.org/package/@digest/webpack"><img alt="NPM Version" src="http://img.shields.io/npm/v/&#64;digest/webpack.svg?maxAge=86400" /></a>
18
- <a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="License" src="https://img.shields.io/npm/l/digest.svg?maxAge=2592000" /></a>
19
- <a href="https://github.com/gajus/canonical"><img alt="Canonical Code Style" src="https://img.shields.io/badge/code%20style-canonical-blue.svg?maxAge=2592000" /></a>
15
+ <a href="https://gitlab.com/digested/node-digest/-/commits/master" target="_blank">
16
+ <img alt="Status" aria-hidden="" src="https://gitlab.com/digested/node-digest/badges/master/pipeline.svg">
17
+ </a>
18
+ <a href="https://digested.gitlab.io/node-digest/coverage">
19
+ <img alt="Coverage Report" src="https://gitlab.com/digested/node-digest/badges/master/coverage.svg" />
20
+ </a>
21
+ <a href="https://www.npmjs.org/package/@digest/webpack">
22
+ <img alt="NPM Version" src="http://img.shields.io/npm/v/&#64;digest/webpack.svg?maxAge=86400" />
23
+ </a>
24
+ <a href="https://www.gnu.org/licenses/lgpl-3.0.en.html">
25
+ <img alt="License LGPL 3.0 or later" src="https://img.shields.io/npm/l/&#64;digest/webpack.svg?maxAge=2592000" />
26
+ </a>
27
+ <a href="https://github.com/gajus/eslint-config-canonical">
28
+ <img alt="Code Style Canonical" src="https://img.shields.io/badge/code%20style-canonical-blue.svg?maxAge=2592000" />
29
+ </a>
20
30
  </div>
31
+ <br />
32
+ <br />
21
33
 
22
- <h2> </h2>
34
+ > A node digest project package
23
35
 
24
- **@digest/webpack** provides a [Webpack](https://webpack.js.org/) configuration
25
- with defaults for common loaders and plugins.
36
+ See the [project page](https://gitlab.com/digested/node-digest/) for documentation or the
37
+ [issues](https://gitlab.com/digested/node-digest/-/issues) associated with this package.
26
38
 
27
- **[Click here to see working build demos](http://digested.gitlab.io/node-digest/)**
28
39
 
29
- ###### In a nutshell:
30
-
31
- Assets include `.html`, `.css`, `.js`, `.svg`, `.png`, `.jpg`, `.ico`,
32
- `.gif`, `.woff(2)`, `.eot`, and `.ttf`. Default `index.htm` and `favicon` are
33
- included and can be overridden. Minification, asset extraction, `manifest.js`
34
- and `vendor.js` extraction, file hashes (for cache busting), file compression,
35
- and whole lot more are preconfigured.
36
- In development environments, source minification is
37
- skipped, source maps are lazily generated, and `webpack-hot-middleware` is
38
- configured. A library mode can be set to output proper minified `umd` builds.
39
-
40
- Additional loaders are configured for React (`.jsx`), Flow, TypeScript
41
- (`.ts`, `.tsx`), Sass (`.sass`, `.scss`), GraphQL (`.graphql`, `.gql`), and linters
42
- (`eslint`, `stylelint`). These loaders will activate if their
43
- respective `@digest` packages have been included. As will `workbox`, which is
44
- configured to provide basic WebApp service worker and cache support.
45
-
46
- ***Note: this project is still alpha quality with possible breaking changes
47
- with each release.***
48
-
49
- ## Install
50
-
51
- ```bash
52
- npm install --save-dev @digest/webpack
53
- ```
54
-
55
- Examples demonstrating environment variables in `package.json` scripts use
56
- `cross-env` to assist with cross-platform development. It isn't required but
57
- recommended practice. If used, install globally:
58
-
59
- ```bash
60
- npm install -g cross-env
61
- ```
62
-
63
- ## Setup
64
-
65
- ### npm
66
-
67
- To use the **@digest/webpack** config, create a `webpack.config.js` file in the
68
- root of your project and import:
69
-
70
- ```js
71
- /* /webpack.config.js */
72
-
73
- var webpackDigest = require('@digest/webpack');
74
-
75
- module.exports = webpackDigest;
76
- ```
77
-
78
- This file is automatically picked up by the `webpack` command. You can also
79
- point `webpack` directly to **Webpack Digest** with the `--config` option.
80
-
81
- To run with npm, setup scripts in your project's `package.json`. The following
82
- examples will perform development and production builds:
83
-
84
- ```json
85
- "/package.json"
86
-
87
- "scripts": {
88
- "build": "webpack --progress --colors --display-error-details",
89
- "build:dev": "cross-env NODE_ENV='development' webpack --progress --colors --display-error-details"
90
- }
91
- ```
92
-
93
- Once added to your `package.json`, run one of the scripts in the terminal:
94
-
95
- ```bash
96
- npm run start:local
97
- ```
98
-
99
- ### Maven
100
-
101
- **@digest/webpack** can also be configured in Maven projects using
102
- [frontend-maven-plugin](https://github.com/eirslett/frontend-maven-plugin)\. To
103
- use with Maven, set the `frontend-maven-plugin` arguments and environment
104
- variables in the pom.xml:
105
-
106
- ```xml
107
- '/pom.xml'
108
-
109
- <execution>
110
- <id>webpack install</id>
111
- <goals>
112
- <goal>webpack</goal>
113
- </goals>
114
- <configuration>
115
- <arguments>--display-error-details</arguments>
116
- <environmentVariables>
117
- <NODE_ENV>${NODE_ENV}</NODE_ENV>
118
- </environmentVariables>
119
- </configuration>
120
- </execution>
121
- ```
122
-
123
- ## Properties
124
-
125
- ### Setting properties
126
-
127
- Properties can be loaded either from a `webpack.digest.config.json` file in the
128
- root of your project (excluding `NODE_ENV`, `DIGEST`), ***or*** via
129
- environment variables. For example:
130
-
131
- ```json
132
- "/webpack.digest.config.json"
133
-
134
- {
135
- "reportPath": "/testReports"
136
- }
137
- ```
138
-
139
- ```json
140
- "/package.json"
141
-
142
- {
143
- ...
144
- "scripts": {
145
- "build": "cross-env REPORT_PATH='/testReports' webpack --progress --colors --display-error-details"
146
- ...
147
- }
148
- }
149
- ```
150
-
151
- Environment variables take precedent and make it easy to switch to `development`
152
- mode or override other properties in the `webpack.digest.config.json` settings.
153
- However, `webpack.digest.config.json` is recommended for most configuration to
154
- reduce verbosity in your `package.json` scripts.
155
-
156
- ### Property index
157
-
158
- `@digest` packages follow convention over configuration. All properties are
159
- *optional* and have sane defaults for most use cases. The following are
160
- `@digest` properties relevant to `@digest/webpack`. For a full property list,
161
- see [`@digest/scripts`](https://www.npmjs.com/package/@digest/scripts).
162
-
163
- | digest.config.js | Environment Variable | Description | Default | Options |
164
- |---------------------------|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------|
165
- | *n/a* | **NODE_ENV** | Use either **production** or **development**. Production features include minification, while development features include linting and HMR. | `production` | <code>\[production&#124;development\]</code> |
166
- | *n/a* | DIGEST | Path to `@digest` settings. It contains these settings and [more](https://www.npmjs.com/package/@digest/scripts). | `/digest.config.js` | |
167
- | angular | ANGULAR | Enable/Disable [`Angular`](https://angular.io/) required Babel plugins, Webpack loaders, and library entries | `true` if `@digest/angular` is included in `package.json` dependencies; otherwise `false` | <code>\[true&#124;false\]</code> |
168
- | babel | BABEL | Path to [`Babel configuration file`](https://babeljs.io/docs/en/babelrc) or `false` to disable | `/.babelrc`, or `@digest/webpack-babel` provided configuration file if included in `package.json` dependencies, otherwise `false` | <code>\[PATH&#124;false\]</code> |
169
- | baseHref | BASE_HREF | Set the provided default `index.html` base href path, e.g. `<base href=''>`. Also used by provided express and workbox configs. | `/` | |
170
- | cache | CACHE | Path to store temporary cache files | `/node_modules/.cache/` | |
171
- | compression | COMPRESSION | Enable file compression | `true` | <code>\[true&#124;false\]</code> |
172
- | config | CONFIG | Path to Webpack config. | `/webpack.config.js`, or `@digest/webpack` provided config | |
173
- | cssModules | CSS_MODULES | Enables CSS modules in Webpack and Babel | `false` | <code>\[true&#124;false\]</code> |
174
- | env | ENV | A `json` object that defines environment variables to be included by Webpack DefinePlugin. For example, `{"open": "\"sets\""}`. Accessible under `process.env`. | `{}` | |
175
- | eslint | ESLINT | Path to JavaScript [ESLint configuration file](https://eslint.org/docs/user-guide/configuring) | `/.eslintrc`, or `@digest/webpack-eslint` provided configuration file if included in `package.json` dependencies, otherwise `false` | <code>\[PATH&#124;false\]</code> |
176
- | favicon | FAVICON | Path to `favicon.png` | `/SRC_PATH/favicon.png` or default favicon packaged with `@digest/webpack` | |
177
- | flow | FLOW | Enable/Disable [`FlowType`](https://flow.org/) Babel [preset](https://www.npmjs.com/package/@babel/preset-flow) | `true` if `@digest/flow` is included in `package.json` dependencies; otherwise `false` | <code>\[true&#124;false\]</code> |
178
- | graphql | GRAPHQL | Enable/Disable [`GraphQL`](https://graphql.org/) Babel [`plugin`](https://www.npmjs.com/package/babel-plugin-graphql-tag) and Webpack file [`loader`](https://www.npmjs.com/package/graphql-tag#webpack-preprocessing-with-graphql-tagloader) | `true` if `@digest/graphql` is included in `package.json` dependencies; otherwise `false` | <code>\[true&#124;false\]</code> |
179
- | graphqlSchema | GRAPHQL_SCHEMA | Path to GraphQL `schema.json` | `/schema.json` | |
180
- | index | INDEX | Path to `index.htm` | `/SRC_PATH/index.htm` or default `index.htm` packaged with `@digest/webpack` | |
181
- | jestSetup | JEST_SETUP | Path to [Jest](https://jestjs.io/) [`setup file`](https://jestjs.io/docs/en/configuration.html#setupfiles-array) | `/jest.setup.json`, or `@digest/jest` provided configuration file if included in `package.json` dependencies | |
182
- | library | LIBRARY | Toggle UMD library creation instead. This generates a bundle *without* dependencies and polyfills | `false` | <code>\[true&#124;false\]</code> |
183
- | minimize | MINIMIZE | Enable/Disable minification. Can be useful when wanting to both copies for publishing. | `true` | <code>\[true&#124;false\]</code> |
184
- | parallel | PARALLEL | Whether to run loaders in parallel or not. Parallel will only use the maximum processors minus two; but can be disabled altogether if issues still arise. | `true` | <code>\[true&#124;false\]</code> |
185
- | polyfills | POLYFILLS | Path to additional polyfills | `/polyfills.js` | |
186
- | postcss | POSTCSS | Path to [PostCSS](https://github.com/postcss/postcss#webpack) config | `/postcss.config.js`, or `@digest/webpack-postcss` provided configuration file if included in `package.json` dependencies, otherwise `false` | <code>\[PATH&#124;false\]</code> |
187
- | postcssWhitelist | POSTCSS_WHITELIST | A pipe separated whitelist of packages in `node_modules` that *should* be parsed by PostCSS | `react-toolbox` | |
188
- | pwa | PWA | Includes [`Workbox`](https://developers.google.com/web/tools/workbox/) entries in Webpack build | `true` if `@digest/webpack-workbox` is included in `package.json` dependencies; otherwise `false` | <code>\[true&#124;false\]</code> |
189
- | react | REACT | Enable/Disable [`React`](https://reactjs.org/) Babel [`preset`](https://www.npmjs.com/package/@babel/preset-react) and other related plugins | `true` if `@digest/react` is included in `package.json` dependencies; otherwise `false` | <code>\[true&#124;false\]</code> |
190
- | reportPath | REPORT_PATH | Path to generate reports | `/reports` | |
191
- | scss | SCSS | Enable/Disable [`SCSS`](https://sass-lang.com/) Webpack [loader](https://www.npmjs.com/package/sass-loader) | `true` if `@digest/scss` is included in `package.json` dependencies; otherwise `false` | <code>\[true&#124;false\]</code> |
192
- | shortName | SHORT_NAME | An optional shorter name to be used in bundle generation. Useful when generating libraries. | The `name` property in `package.json` | |
193
- | sourceMaps | SOURCE_MAPS | Toggle source map generation | `true` | <code>\[true&#124;false\]</code> |
194
- | srcPath | SRC_PATH | Path to project files directory relative to project root | `/src` | |
195
- | staticPath | STATIC_PATH | Path to directory where Webpack will deposit the resulting project relative to project root | `/public` | |
196
- | stylelint | STYLELINT | Path to CSS [`stylelint configuration file`](https://stylelint.io/user-guide/configuration/) or `false` to disable | `/.stylelintrc`, or `@digest/webpack-stylelint` provided configuration file if included in `package.json` dependencies, otherwise `false` | <code>\[PATH&#124;false\]</code> |
197
- | stylelintIgnore | STYLELINT_IGNORE | Path to CSS [`stylelint ignore file`](https://stylelint.io/user-guide/configuration/#ignorefiles) | `/.stylelintignore` or default `.stylelintignore` packaged with `@digest/webpack-stylelint` | |
198
- | typescript | TYPESCRIPT | Path to [TypeScript configuration file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or `false` to disable | `/tsconfig.json`, or `@digest/webpack-typescript` provided configuration file if included in `package.json` dependencies, otherwise `false` | <code>\[PATH&#124;false\]</code> |
199
-
200
- ## Usage
201
-
202
- ### ESLINT / TSLINT / STYLELINT
203
-
204
- [`ESLint`](https://eslint.org/) and [`stylelint`](https://stylelint.io/) can
205
- run during every `webpack` build.
206
- Include `@digest/webpack-eslint` and
207
- `@digest/stylelint`, respectively, to enable linting in `@digest/webpack`.
208
-
209
- However, it is also common for IDE's to have built in linters which load the
210
- lint config files. These three linters offer `extends` options, which allow a
211
- config file to extend another. Using `extends`, you can include the following
212
- lint files to extend the configs provided by **Webpack Digest** to the root of
213
- your project. Additionally, this is how you would add new rules or override the
214
- defaults.
215
-
216
- ```json
217
- "/.eslintrc"
218
-
219
- {
220
- "extends": "@digest/eslint-config"
221
- }
222
- ```
223
-
224
- ```json
225
- "/.stylelintrc"
226
-
227
- {
228
- "extends": "@digest/stylelint-config"
229
- }
230
- ```
231
-
232
- *Note: The lint config packages are included with the webpack lint packages*
233
-
234
- ### Babel
235
-
236
- To use [TypeScript](https://babeljs.io/), include the
237
- `@digest/webpack-babel` package in your `package.json`. See
238
- [`@digest/webpack-babel`](https://www.npmjs.com/package/@digest/webpack-babel)
239
- for more details.
240
-
241
- ### TypeScript
242
-
243
- To use [TypeScript](http://www.typescriptlang.org/), include the
244
- `@digest/webpack-typescript` package in your `package.json`. See
245
- [`@digest/webpack-typescript`](https://www.npmjs.com/package/@digest/webpack-typescript)
246
- for more details.
247
-
248
- ### GraphQL
249
-
250
- To use [GraphQL](https://graphql.org/), include the
251
- `@digest/webpack-graphql` package in your `package.json`. See
252
- [`@digest/webpack-graphql`](https://www.npmjs.com/package/@digest/webpack-graphql)
253
- for more details.
254
-
255
- ### CSS Modules
256
-
257
- CSS Module must be explicitly activated.
258
-
259
- ```json
260
- "/digest.config.json"
261
-
262
- {
263
- "cssModules": true
264
- }
265
- ```
266
-
267
- When CSS modules are used, a CSS file can be set explicitly global via the
268
- `.g.css` extension. For example, `styles.g.css` styles would be loaded globally,
269
- while `styles.css` would load as a CSS module. CSS files from `node_modules` are
270
- always global.
271
-
272
- *When using React,
273
- [React CSS modules Babel plugin](https://www.npmjs.com/package/@dr.pogodin/babel-plugin-react-css-modules)
274
- is included and the styleName property will become available in your
275
- components*
276
-
277
- ### Webpack Config
278
-
279
- It's easy to extend the **Webpack Digest** *Webpack* configuration. Simply
280
- edit create a `webpack.config.js` in the root of your project, import the
281
- `@digest/webpack` configuration file, modify the object, and export. Projects
282
- such as [webpack-merge](https://www.npmjs.com/package/webpack-merge) and
283
- [webpack-config](https://www.npmjs.com/package/webpack-config) can help extend
284
- the `@digest/webpack` base config object.
285
-
286
- ```js
287
- '/webpack.config.js'
288
-
289
- var webpackDigest = require('@digest/webpack');
290
-
291
- function extend(config) {
292
- /* Modify the config */
293
- return config;
294
- }
295
-
296
- module.exports = extend(webpackDigest);
297
- ```
298
-
299
- If you use a different file name or path for your `webpack.config.js`, you can
300
- refer to your extended config explicitly in your build scripts with `webpack`'s
301
- `--config` option:
302
-
303
- ```json
304
- '/package.json'
305
-
306
- {
307
- ...
308
- "scripts": {
309
- ...
310
- "build": "webpack --config webpack.config.js --progress --colors --display-error-details"
311
- }
312
- }
313
- ```
314
-
315
- ### Express
316
-
317
- `@digest/webpack-express` includes helpful `Express` scripts to get started
318
- quickly and including it in your `package.json` enables Webpack's hot reloading
319
- during development. For more details see
320
- [`@digest/webpack-express`](https://www.npmjs.com/package/@digest/webpack-express)
321
-
322
-
323
- ## Testing
324
-
325
- `@digest` also includes shared testing configurations. These work well in
326
- conjunction with `@digest/webpack`:
327
-
328
- * [`@digest/jest`](https://www.npmjs.com/package/@digest/jest)
329
- * [`@digest/nightwatch`](https://www.npmjs.com/package/@digest/nightwatch)
330
-
331
- ## License
332
-
333
- GPLv3