Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack 5 upgrades #30

Merged
merged 12 commits into from
Oct 28, 2020
11 changes: 2 additions & 9 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
{
"extends": [
"dabapps/es6",
"dabapps/commonjs",
"dabapps/node",
"prettier"
],
"plugins": [
"prettier"
]
"extends": ["dabapps/es6", "dabapps/commonjs", "dabapps/node", "prettier"],
"plugins": ["prettier"]
}
5 changes: 5 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/node_modules/*
/coverage/*
/build/*
/dist/*
/test-files/build/*
56 changes: 28 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,17 @@ This utility will create a webpack config that should function as a drop-in for

It features:

* Tree shaking
* Circular dependency checking
* Synthetic default imports (TypeScript)
* Project root alias (`^`)
* Type checking in separate worker
* Transpiling from ES6+ (and React) to target browsers
* Polyfilling ES6+ features
- Tree shaking
- Circular dependency checking
- Synthetic default imports (TypeScript)
- Project root alias (`^`)
- Type checking in separate worker
- Transpiling from ES6+ (and React) to target browsers
- Polyfilling ES6+ features

## Node support

As of version `0.4` Node less than `10.13` is not supported.

## Installation

Expand All @@ -27,7 +31,7 @@ npm i @dabapps/create-webpack-config -S
Install peer dependencies (TypeScript must be at least version 2):

```shell
npm i typescript webpack@4 webpack-cli@3 core-js@3 -S
npm i typescript webpack@5 webpack-cli@4 core-js@3 -S
```

## Setup
Expand All @@ -39,6 +43,7 @@ Create a file called `webpack.config.js` and add the following contents, adjusti
This will bundle your `index.ts` file and all dependencies into a `bundle.js` in the `static/build/js` directory.

`webpack.config.js`

```js
const createWebpackConfig = require('@dabapps/create-webpack-config');

Expand All @@ -47,8 +52,8 @@ module.exports = createWebpackConfig({
outDir: './static/build/js',
tsconfig: './tsconfig.dist.json',
env: {
NODE_ENV: 'production'
}
NODE_ENV: 'production',
},
});
```

Expand All @@ -57,27 +62,28 @@ If you require multiple bundles you can supply an object as the `input`. Files w
The following config will create `static/build/js/frontend-bundle.js` and `static/build/js/admin-bundle.js`.

`webpack.config.js`

```js
const createWebpackConfig = require('@dabapps/create-webpack-config');

module.exports = createWebpackConfig({
input: {
frontend: './static/src/ts/index.ts',
admin: './static/src/ts/admin.ts'
admin: './static/src/ts/admin.ts',
},
outDir: './static/build/js',
tsconfig: './tsconfig.dist.json',
env: {
NODE_ENV: 'production'
}
NODE_ENV: 'production',
},
});
```

If you would like to be able to import "raw" files as strings, you can provide a `rawFileExtensions` option, with a list of file extension that should be imported as strings e.g.

```js
{
rawFileExtensions: ['html', 'xml', 'txt', 'csv']
rawFileExtensions: ['html', 'xml', 'txt', 'csv'];
}
```

Expand Down Expand Up @@ -111,6 +117,7 @@ Create a `.browserslistrc` file in the root of your project and add the followin
This file is used by webpack, and other tools such as autoprefixer to make our code compatible with the browsers we want to support.

`.browserslistrc`

```
last 10 Chrome versions
last 10 Firefox versions
Expand All @@ -136,6 +143,7 @@ You may enable type checking on Javascript files by setting `checkJs` to `true`.
`allowSyntheticDefaultImports` and `esModuleInterop` allow us to import modules that don't have default exports as if they did, in TypeScript, so that we can be consistent across Javascript and TypeScript projects. E.g. `import React from 'react';` as opposed to `import * as React from 'react';`

`tsconfig.json`

```json
{
"compilerOptions": {
Expand All @@ -151,20 +159,13 @@ You may enable type checking on Javascript files by setting `checkJs` to `true`.
"jsx": "react",
"target": "es6",
"moduleResolution": "node",
"typeRoots": [
"./node_modules/@types/",
"./static/src/ts/types/"
],
"typeRoots": ["./node_modules/@types/", "./static/src/ts/types/"],
"baseUrl": "./",
"paths": {
"^*": [
"./static/src/ts*"
]
"^*": ["./static/src/ts*"]
}
},
"include": [
"./static/src/ts/"
]
"include": ["./static/src/ts/"]
}
```

Expand All @@ -175,13 +176,11 @@ Create a `tsconfig.dist.json` file in the root of your project and add the follo
This is necessary to allow us to build our source without also type checking our tests or other Javascript and TypeScript files in the project.

`tsconfig.dist.json`

```json
{
"extends": "./tsconfig.json",
"exclude": [
"./static/src/ts/__tests__/",
"./static/src/ts/__mocks__/"
]
"exclude": ["./static/src/ts/__tests__/", "./static/src/ts/__mocks__/"]
}
```

Expand All @@ -190,6 +189,7 @@ This is necessary to allow us to build our source without also type checking our
Add the following scripts to your `package.json`.

`package.json`

```json
{
"scripts": {
Expand Down
Loading