Skip to content

Commit c1a8f7a

Browse files
adamyonkadamyonk
committed
New post
1 parent 57716ad commit c1a8f7a

File tree

6 files changed

+222
-8
lines changed

6 files changed

+222
-8
lines changed

‎src/components/Meta.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react"
2+
3+
export default ({ children }) => (
4+
<React.Fragment>
5+
<div className="post-meta">{children}</div>
6+
<style jsx>{`
7+
.post-meta {
8+
font-size: 0.8em;
9+
}
10+
`}</style>
11+
</React.Fragment>
12+
)

‎src/layouts/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@ const TemplateWrapper = ({ children }) => (
404404
}
405405
406406
:not(pre) > code[class*="language-"] {
407-
// display: inline-block;
407+
white-space: normal;
408408
}
409409
code[class*="language-"],
410410
pre[class*="language-"] {

‎src/pages/blog/2018-04-02-webpack-3-to-4.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
templateKey: 'post'
3+
title: Webpack 3 to 4
4+
path: /webpack-3-to-4
5+
date: Mon, 02 Apr 2018 21:06:49 -0500
6+
tags: [webpack, javascript]
7+
---
8+
9+
I recently moved a large project from webpack 3 to 4, and the documentation is very light<sup>[1](#1)</sup>. I just wanted to throw together a few notes about the bumps in the road here. For more info about the release check out:
10+
11+
* The [webpack 4 announcement post](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) on Medium
12+
* The [v4.0.0 tag release notes](https://github.com/webpack/webpack/releases/tag/v4.0.0) on GitHub
13+
14+
## Upgrade node to 8.9.4
15+
16+
To get the best performance out of v4, [@wSokra says](https://twitter.com/wSokra/status/967852475918274561) use node 8.9.4.
17+
18+
## Upgrade webpack
19+
20+
```bash
21+
yarn add webpack webpack-cli --dev
22+
```
23+
24+
## Use a mode
25+
26+
`The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.`
27+
28+
You have to choose a mode:
29+
30+
```javascript
31+
mode: "production",
32+
```
33+
34+
## Get rid of webpack.optimize.CommonsChunkPlugin
35+
36+
`Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.`
37+
38+
We used `runtime` and `vendor` chunks in v3 like so:
39+
40+
```javascript
41+
plugins: [
42+
…
43+
new webpack.optimize.CommonsChunkPlugin({
44+
name: ["runtime"],
45+
minChunks: Infinity,
46+
}),
47+
new webpack.optimize.CommonsChunkPlugin({
48+
name: "vendor",
49+
minChunks: ({ resource }) => /node_modules/.test(resource),
50+
}),
51+
…
52+
]
53+
```
54+
55+
In v4, this roughly translates to:
56+
57+
```javascript
58+
optimization: {
59+
runtimeChunk: "single", // enable "runtime" chunk
60+
splitChunks: {
61+
cacheGroups: {
62+
vendor: {
63+
test: /[\\/]node_modules[\\/]/,
64+
name: "vendor",
65+
chunks: "all",
66+
},
67+
},
68+
},
69+
}
70+
```
71+
72+
More info about the new `optimization.splitChunks` option can be found [here](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).
73+
74+
## Get rid of webpack.optimize.ModuleConcatenationPlugin
75+
76+
It is now on by default in `production` mode.
77+
78+
## Change webpack.optimize.UglifyJsPlugin
79+
80+
`Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.`
81+
82+
v4 now handles dead code elimination internally. Both it and minimization are on by default in `production` mode, but to continue tuning Uglify settings, add [uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin):
83+
84+
```bash
85+
yarn add -D uglifyjs-webpack-plugin
86+
```
87+
88+
And in the `optimization.minimizer` section:
89+
90+
```javascript
91+
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
92+
…
93+
optimization: {
94+
minimizer: [
95+
new UglifyJSPlugin(...)
96+
]
97+
},
98+
```
99+
100+
## Upgrade eslint-loader
101+
102+
`Module build failed: TypeError: Cannot read property 'eslint' of undefined`
103+
104+
```bash
105+
yarn add eslint-loader --dev
106+
```
107+
108+
## Upgrade file-loader
109+
110+
`Module build failed: TypeError: Cannot read property 'fileLoader' of undefined`
111+
112+
```bash
113+
yarn add file-loader --dev
114+
```
115+
116+
<sup><a name="1">1</a></sup>Apparently the webpack team was trying to hit a deadline and decided to forgo writing docs or a migration guide before the release.

‎src/pages/uses.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
templateKey: 'page'
3+
title: Uses
4+
path: /uses
5+
date: 2018-01-23 10:32:59 -0600
6+
---
7+
8+
## Software
9+
10+
* 1Password
11+
[macOS](https://geo.itunes.apple.com/us/app/1password/id443987910?mt=12&app=apps&at=1001lJ7Y)
12+
[iOS](https://itunes.apple.com/us/app/1password/id568903335?mt=8&at=1001lJ7Y)
13+
* iA Writer
14+
[macOS](https://geo.itunes.apple.com/us/app/ia-writer/id775737590?mt=12&app=apps&at=1001lJ7Y)
15+
[iOS](https://itunes.apple.com/us/app/ia-writer/id775737172?mt=8&at=1001lJ7Y)
16+
* Reeder
17+
[macOS](https://geo.itunes.apple.com/us/app/reeder-3/id880001334?mt=12&app=apps&at=1001lJ7Y)
18+
[iOS](https://itunes.apple.com/us/app/reeder-3/id697846300?mt=8&at=1001lJ7Y)
19+
* Tweetbot
20+
[macOS](https://geo.itunes.apple.com/us/app/tweetbot-for-twitter/id557168941?mt=12&app=apps&at=1001lJ7Y)
21+
[iOS](https://itunes.apple.com/us/app/tweetbot-4-for-twitter/id1018355599?mt=8&at=1001lJ7Y)
22+
* Overcast
23+
[iOS](https://itunes.apple.com/us/app/overcast/id888422857?mt=8&at=1001lJ7Y)
24+
* Soulver
25+
[macOS](https://geo.itunes.apple.com/us/app/soulver/id413965349?mt=12&app=apps&at=1001lJ7Y)
26+
[iOS](https://itunes.apple.com/us/app/soulver/id348142037?mt=8&at=1001lJ7Y)
27+
* Halide
28+
[iOS](https://itunes.apple.com/us/app/halide-raw-manual-camera/id885697368?mt=8&at=1001lJ7Y)
29+
* Gyroscope
30+
[iOS](https://itunes.apple.com/us/app/gyroscope-health/id1104085053?mt=8&at=1001lJ7Y)
31+
* Moves
32+
[iOS](https://itunes.apple.com/us/app/moves/id509204969?mt=8&at=1001lJ7Y)
33+
* RescueTime [macOS](https://www.rescuetime.com/)
34+
* Pinner
35+
[iOS](https://itunes.apple.com/us/app/pinner-for-pinboard/id591613202?mt=8&at=1001lJ7Y)
36+
* Apollo
37+
[iOS](https://itunes.apple.com/us/app/apollo-for-reddit/id979274575?mt=8&at=1001lJ7Y)
38+
* TunnelBlick [macOS](https://www.tunnelblick.net/)
39+
* Kap [macOS](https://getkap.co/)
40+
41+
## Hardware
42+
43+
* [13-inch MacBook Pro with Touch Bar and Touch ID](http://amzn.to/2F3062U)
44+
* [iPad Mini 4](http://amzn.to/2DXuSL2)
45+
* [iPhone X](https://amzn.to/2EfALBM)
46+
* [Apple Watch Series 3](http://amzn.to/2rtYQ6X)
47+
* [Kindle Voyage](https://amzn.to/2EeVRQX)
48+
* [Ubiquiti Unifi PRO AP](http://amzn.to/2G49SD7)
49+
* [Ubiquity Unifi Security Gateway](http://amzn.to/2F2ne1l)
50+
* [Roost Laptop Stand](http://amzn.to/2DXrUWU)
51+
52+
## Smart Home
53+
54+
* [ecobee3 Thermostat](http://amzn.to/2DpSxTu)
55+
* [iDevices Switch](http://amzn.to/2n0uBPC)
56+
* [iDevices Wall Switch](http://amzn.to/2G2xIPL)
57+
58+
## EDC
59+
60+
* [Leatherman Wave](http://amzn.to/2DwBa6T)
61+
* [Spyderco Bug](http://amzn.to/2DXFn13)
62+
* [Uncle Bill's Sliver Gripper](http://amzn.to/2n1dr4c)
63+
* [Olight i3E EOS AAA Flashlight](http://amzn.to/2DCZ3tp)
64+
* [Widgy Pico Pry Bar](https://countycomm.com/products/widgy-pry-bars)
65+
* [Mini Carabiners](http://amzn.to/2GjZo2N)
66+
* [Nite Ize S-Biner #2 Stainless](http://amzn.to/2GlKjO6)
67+
* [Vargo Titanium Water Bottle](http://amzn.to/2n1O1n0)
68+
* [Weego Jump Starter 22s](http://amzn.to/2DybaIa)
69+
70+
[macos]: https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/macappstore-sm.svg
71+
[ios]: https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-sm.svg

‎src/templates/page.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
11
import React from "react"
2+
import Date from "../components/Date"
3+
import Meta from "../components/Meta"
24

35
export default ({ data }) => {
46
const { markdownRemark: post } = data
7+
const { date, updated, title } = post.frontmatter
58
return (
69
<article>
7-
<h2>{post.frontmatter.title}</h2>
10+
<h1>{title}</h1>
811
<div dangerouslySetInnerHTML={{ __html: post.html }} />
12+
{!!date && (
13+
<Meta>
14+
<em>
15+
{updated ? "Originally posted" : "Posted"} <Date date={date} />
16+
{updated && (
17+
<React.Fragment>
18+
<br />Updated <Date date={updated} />
19+
</React.Fragment>
20+
)}
21+
</em>
22+
</Meta>
23+
)}
924
</article>
1025
)
1126
}
1227

1328
export const aboutPageQuery = graphql`
14-
query AboutPage($path: String!) {
29+
query Page($path: String!) {
1530
markdownRemark(frontmatter: { path: { eq: $path } }) {
1631
html
1732
frontmatter {
1833
path
34+
date
35+
updated
1936
title
2037
}
2138
}

‎src/templates/post.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react"
22
import Helmet from "react-helmet"
33
import Date from "../components/Date"
4+
import Meta from "../components/Meta"
45
import Tags from "../components/Tags"
56

67
export default function Template({ data }) {
@@ -10,19 +11,16 @@ export default function Template({ data }) {
1011
<Helmet title={`Blog | ${post.frontmatter.title}`} />
1112
<article>
1213
<h1>{post.frontmatter.title}</h1>
13-
<div className="post-meta">
14+
<Meta>
1415
Posted <Date date={post.frontmatter.date} /> under{" "}
1516
<Tags tags={post.frontmatter.tags} />
16-
</div>
17+
</Meta>
1718
<div dangerouslySetInnerHTML={{ __html: post.html }} />
1819
</article>
1920
<style jsx>{`
2021
h1 {
2122
margin-bottom: 0;
2223
}
23-
.post-meta {
24-
font-size: 0.8em;
25-
}
2624
`}</style>
2725
</React.Fragment>
2826
)

0 commit comments

Comments
 (0)