Skip to content

Commit

Permalink
pkg: Use webpack 5 by default
Browse files Browse the repository at this point in the history
pkg: Use sass instead of node-sass

fix: Make devserver static asset serving consistent

BREAKING CHANGE: Dev mode static assets /assets/${buildDir} ->
/${buildDir}

(By default this means /assets/dist/ -> /dist/)

pkg: html plugin fixes compat issue

fix: sass-loader filecache compat

pkg: Bump style-only-imports

fix: polyfill node builtins for web target

fix: More comprehensive node polyfill

pkg: Maintain 4 compatibilitly
  • Loading branch information
ntucker committed Oct 24, 2020
1 parent 4cc699f commit 80ea507
Show file tree
Hide file tree
Showing 12 changed files with 2,101 additions and 1,294 deletions.
2 changes: 1 addition & 1 deletion examples/linaria/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "1.0.12",
"private": true,
"scripts": {
"start": "webpack-dev-server --mode=development",
"start": "webpack serve --mode=development",
"prod": "serve ./dist",
"build": "webpack --mode=production",
"build:server": "webpack --mode=production --target=node",
Expand Down
2 changes: 1 addition & 1 deletion examples/typescript/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "4.2.1",
"private": true,
"scripts": {
"start": "webpack-dev-server --mode=development",
"start": "webpack serve --mode=development",
"prod": "serve ./dist",
"build": "webpack --mode=production",
"build:server": "webpack --mode=production --target=node",
Expand Down
4 changes: 3 additions & 1 deletion examples/typescript/src/pages/Home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import path from 'path';

import style from './index.scss';
import plain from './plain.css';
import Worker from './my.worker.ts';
Expand All @@ -19,7 +21,7 @@ export default function Home() {
World <a href="https://true.io">True IO</a>
</p>
<p className={plain.mountainTop}>
Ok again <img src={animated} />
Ok again <img src={animated} /> {path.join('/hi/bob', 'test.txt')}
</p>
<p>
<img src={restHooks} />
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
"examples/*"
],
"nohoist": [
"**/html-webpack-plugin",
"**/mini-css-extract-plugin"
"**/@storybook/**"
]
},
"scripts": {
Expand All @@ -34,7 +33,7 @@
"husky": "^3.0.9",
"lerna": "^3.22.1",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"scripts": {
"start": "webpack-dev-server --mode=development",
"start": "webpack serve --mode=development",
"prod": "serve <%= assetPath %>",
"build": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
Expand Down
2 changes: 1 addition & 1 deletion packages/webpack-config-anansi/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ module.exports = makeConfig(options);
```json
{
"scripts": {
"start": "webpack-dev-server --mode=development",
"start:dev": "webpack serve --mode=development",
"build": "webpack --mode=production",
"build:server": "webpack --mode=production --target=node",
"analyze": "webpack --mode=production --env analyze",
Expand Down
29 changes: 25 additions & 4 deletions packages/webpack-config-anansi/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
},
"devDependencies": {
"@anansi/babel-preset": "^1.2.9",
"@babel/cli": "^7.10.5",
"@babel/cli": "^7.12.0",
"@babel/core": "^7.12.0",
"debug": "^4.1.1",
"prettier-eslint-cli": "^5.0.0",
Expand All @@ -54,48 +54,69 @@
"dependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
"@svgr/webpack": "^5.4.0",
"assert": "^2.0.0",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"browserify-zlib": "^0.2.0",
"circular-dependency-plugin": "^5.2.0",
"clean-webpack-plugin": "^3.0.0",
"console-browserify": "^1.2.0",
"constants-browserify": "^1.0.0",
"critters-webpack-plugin": "^2.5.0",
"crypto-browserify": "^3.12.0",
"css-loader": "^4.3.0",
"domain-browser": "^4.18.0",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"error-overlay-webpack-plugin": "^0.4.1",
"events": "^3.2.0",
"file-loader": "^6.1.1",
"hard-source-webpack-plugin": "^0.13.1",
"html-webpack-plugin": "^4.5.0",
"https-browserify": "^1.0.0",
"is-wsl": "^2.2.0",
"markdown-loader": "^6.0.0",
"mini-css-extract-plugin": "^1.0.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"os-browserify": "^0.3.0",
"path": "^0.12.7",
"path-browserify": "^1.0.1",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"process": "^0.11.10",
"punycode": "^2.1.1",
"querystring-es3": "^0.2.1",
"ramda": "^0.26.1",
"raw-loader": "4.0.2",
"react-dev-utils": "^10.2.1",
"react-docgen-typescript-loader": "^3.7.2",
"sass-loader": "^10.0.3",
"sass-loader": "^10.0.4",
"sass-resources-loader": "^2.1.1",
"stats-webpack-plugin": "^0.7.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.1.1",
"string_decoder": "^1.3.0",
"svgo": "^1.3.2",
"svgo-loader": "^2.2.1",
"terser-webpack-plugin": "^4.2.3",
"thread-loader": "^3.0.0",
"timers-browserify": "^2.0.11",
"tty-browserify": "^0.0.1",
"url": "^0.11.0",
"url-loader": "^4.1.1",
"util": "^0.12.3",
"vm-browserify": "^1.1.2",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-fix-style-only-entries": "^0.5.2",
"webpack-fix-style-only-entries": "^0.6.0",
"webpack-node-externals": "^2.5.2",
"worker-loader": "^3.0.4"
},
"peerDependencies": {
"@hot-loader/react-dom": "^16.0.0",
"@storybook/react": "^6.0.0",
"react-refresh": "^0.8.0",
"webpack": "^4.43.0 || ^5.0.0-beta.28",
"webpack": "^4.43.0 || ^5.0.0",
"webpack-cli": "^4.1.0"
},
"peerDependenciesMeta": {
Expand Down
3 changes: 3 additions & 0 deletions packages/webpack-config-anansi/src/base/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import path from 'path';
import StatsPlugin from 'stats-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import webpack from 'webpack';

import { ROOT_PATH, LIBRARY_MODULES_PATH } from './constants';
import { NODE_ALIAS } from './node-polyfill';

export { default as getStyleRules } from './scss';
export { ROOT_PATH };
Expand Down Expand Up @@ -184,6 +186,7 @@ export default function makeBaseConfig({
'node_modules',
],
extensions: ['.js', '.ts', '.tsx', '.scss', '.json'],
alias: webpack.version.startsWith('4') ? {} : NODE_ALIAS,
},
// include the loaders installed by this library
resolveLoader: {
Expand Down
31 changes: 31 additions & 0 deletions packages/webpack-config-anansi/src/base/node-polyfill.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// extracted from https://github.com/webpack/node-libs-browser/blob/master/index.js
export const NODE_ALIAS = {
stream: require.resolve('stream-browserify'),
path: require.resolve('path-browserify'),
crypto: require.resolve('crypto-browserify'),
buffer: require.resolve('buffer'),
vm: require.resolve('vm-browserify'),
assert: require.resolve('assert/'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events/'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser.js'),
punycode: require.resolve('punycode/'),
process: require.resolve('process/browser.js'),
querystring: require.resolve('querystring-es3/'),
_stream_duplex: require.resolve('readable-stream/duplex.js'),
_stream_passthrough: require.resolve('readable-stream/passthrough.js'),
_stream_readable: require.resolve('readable-stream/readable.js'),
_stream_transform: require.resolve('readable-stream/transform.js'),
_stream_writable: require.resolve('readable-stream/writable.js'),
string_decoder: require.resolve('string_decoder/'),
sys: require.resolve('util/util.js'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url/'),
util: require.resolve('util/util.js'),
zlib: require.resolve('browserify-zlib'),
};
8 changes: 6 additions & 2 deletions packages/webpack-config-anansi/src/dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export default function makeDevConfig(
}
config.devServer = {
hot: true,
publicPath: `/${buildDir}`,
clientLogLevel: 'warning',
headers: {
'Access-Control-Allow-Origin': '*',
Expand All @@ -84,13 +85,16 @@ export default function makeDevConfig(
open: true,
historyApiFallback: {
rewrites: [
{ from: /^((?!\/assets).)*/, to: `/assets/${buildDir}index.html` },
{
from: new RegExp(`^((?!\\/${buildDir}).)*`, 'g'),
to: `/${buildDir}index.html`,
},
],
},
// TODO: add proxy options
};
config.devtool = 'cheap-module-source-map';
config.output.publicPath = `/assets/${buildDir}`;
config.output.publicPath = `/${buildDir}`;
// if we know the port, force it in case this is encapsulated in another host
if (argv.port) {
config.output.publicPath = `http://localhost:${argv.port}${config.output.publicPath}`;
Expand Down
7 changes: 7 additions & 0 deletions packages/webpack-config-anansi/src/node.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import path from 'path';
import nodeExternals from 'webpack-node-externals';
import StatsPlugin from 'stats-webpack-plugin';

import { NODE_ALIAS } from './base/node-polyfill';

export default function makeNodeConfig(baseConfig, { rootPath, serverDir }) {
const config = { ...baseConfig };
config.target = 'node';
Expand All @@ -24,6 +26,11 @@ export default function makeNodeConfig(baseConfig, { rootPath, serverDir }) {
config.plugins = config.plugins.filter(
plugin => !(plugin instanceof StatsPlugin),
);
// remove node polyfills as we will execute this in node
config.path.alias = { ...config.path.alias };
for (const alias in NODE_ALIAS) {
delete config.path.alias[alias];
}

return config;
}
Loading

0 comments on commit 80ea507

Please sign in to comment.