Skip to content

Commit

Permalink
New post
Browse files Browse the repository at this point in the history
  • Loading branch information
adamyonk committed Apr 3, 2018
1 parent 57716ad commit c1a8f7a
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 8 deletions.
12 changes: 12 additions & 0 deletions src/components/Meta.js
@@ -0,0 +1,12 @@
import React from "react"

export default ({ children }) => (
<React.Fragment>
<div className="post-meta">{children}</div>
<style jsx>{`
.post-meta {
font-size: 0.8em;
}
`}</style>
</React.Fragment>
)
2 changes: 1 addition & 1 deletion src/layouts/index.js
Expand Up @@ -404,7 +404,7 @@ const TemplateWrapper = ({ children }) => (
}
:not(pre) > code[class*="language-"] {
// display: inline-block;
white-space: normal;
}
code[class*="language-"],
pre[class*="language-"] {
Expand Down
116 changes: 116 additions & 0 deletions src/pages/blog/2018-04-02-webpack-3-to-4.md
@@ -0,0 +1,116 @@
---
templateKey: 'post'
title: Webpack 3 to 4
path: /webpack-3-to-4
date: Mon, 02 Apr 2018 21:06:49 -0500
tags: [webpack, javascript]
---

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:

* The [webpack 4 announcement post](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) on Medium
* The [v4.0.0 tag release notes](https://github.com/webpack/webpack/releases/tag/v4.0.0) on GitHub

## Upgrade node to 8.9.4

To get the best performance out of v4, [@wSokra says](https://twitter.com/wSokra/status/967852475918274561) use node 8.9.4.

## Upgrade webpack

```bash
yarn add webpack webpack-cli --dev
```

## Use a mode

`The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.`

You have to choose a mode:

```javascript
mode: "production",
```

## Get rid of webpack.optimize.CommonsChunkPlugin

`Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.`

We used `runtime` and `vendor` chunks in v3 like so:

```javascript
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ["runtime"],
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: ({ resource }) => /node_modules/.test(resource),
}),
]
```

In v4, this roughly translates to:

```javascript
optimization: {
runtimeChunk: "single", // enable "runtime" chunk
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all",
},
},
},
}
```

More info about the new `optimization.splitChunks` option can be found [here](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).

## Get rid of webpack.optimize.ModuleConcatenationPlugin

It is now on by default in `production` mode.

## Change webpack.optimize.UglifyJsPlugin

`Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.`

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):

```bash
yarn add -D uglifyjs-webpack-plugin
```

And in the `optimization.minimizer` section:

```javascript
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
optimization: {
minimizer: [
new UglifyJSPlugin(...)
]
},
```

## Upgrade eslint-loader

`Module build failed: TypeError: Cannot read property 'eslint' of undefined`

```bash
yarn add eslint-loader --dev
```

## Upgrade file-loader

`Module build failed: TypeError: Cannot read property 'fileLoader' of undefined`

```bash
yarn add file-loader --dev
```

<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.
71 changes: 71 additions & 0 deletions src/pages/uses.md
@@ -0,0 +1,71 @@
---
templateKey: 'page'
title: Uses
path: /uses
date: 2018-01-23 10:32:59 -0600
---

## Software

* 1Password
[macOS](https://geo.itunes.apple.com/us/app/1password/id443987910?mt=12&app=apps&at=1001lJ7Y)
[iOS](https://itunes.apple.com/us/app/1password/id568903335?mt=8&at=1001lJ7Y)
* iA Writer
[macOS](https://geo.itunes.apple.com/us/app/ia-writer/id775737590?mt=12&app=apps&at=1001lJ7Y)
[iOS](https://itunes.apple.com/us/app/ia-writer/id775737172?mt=8&at=1001lJ7Y)
* Reeder
[macOS](https://geo.itunes.apple.com/us/app/reeder-3/id880001334?mt=12&app=apps&at=1001lJ7Y)
[iOS](https://itunes.apple.com/us/app/reeder-3/id697846300?mt=8&at=1001lJ7Y)
* Tweetbot
[macOS](https://geo.itunes.apple.com/us/app/tweetbot-for-twitter/id557168941?mt=12&app=apps&at=1001lJ7Y)
[iOS](https://itunes.apple.com/us/app/tweetbot-4-for-twitter/id1018355599?mt=8&at=1001lJ7Y)
* Overcast
[iOS](https://itunes.apple.com/us/app/overcast/id888422857?mt=8&at=1001lJ7Y)
* Soulver
[macOS](https://geo.itunes.apple.com/us/app/soulver/id413965349?mt=12&app=apps&at=1001lJ7Y)
[iOS](https://itunes.apple.com/us/app/soulver/id348142037?mt=8&at=1001lJ7Y)
* Halide
[iOS](https://itunes.apple.com/us/app/halide-raw-manual-camera/id885697368?mt=8&at=1001lJ7Y)
* Gyroscope
[iOS](https://itunes.apple.com/us/app/gyroscope-health/id1104085053?mt=8&at=1001lJ7Y)
* Moves
[iOS](https://itunes.apple.com/us/app/moves/id509204969?mt=8&at=1001lJ7Y)
* RescueTime [macOS](https://www.rescuetime.com/)
* Pinner
[iOS](https://itunes.apple.com/us/app/pinner-for-pinboard/id591613202?mt=8&at=1001lJ7Y)
* Apollo
[iOS](https://itunes.apple.com/us/app/apollo-for-reddit/id979274575?mt=8&at=1001lJ7Y)
* TunnelBlick [macOS](https://www.tunnelblick.net/)
* Kap [macOS](https://getkap.co/)

## Hardware

* [13-inch MacBook Pro with Touch Bar and Touch ID](http://amzn.to/2F3062U)
* [iPad Mini 4](http://amzn.to/2DXuSL2)
* [iPhone X](https://amzn.to/2EfALBM)
* [Apple Watch Series 3](http://amzn.to/2rtYQ6X)
* [Kindle Voyage](https://amzn.to/2EeVRQX)
* [Ubiquiti Unifi PRO AP](http://amzn.to/2G49SD7)
* [Ubiquity Unifi Security Gateway](http://amzn.to/2F2ne1l)
* [Roost Laptop Stand](http://amzn.to/2DXrUWU)

## Smart Home

* [ecobee3 Thermostat](http://amzn.to/2DpSxTu)
* [iDevices Switch](http://amzn.to/2n0uBPC)
* [iDevices Wall Switch](http://amzn.to/2G2xIPL)

## EDC

* [Leatherman Wave](http://amzn.to/2DwBa6T)
* [Spyderco Bug](http://amzn.to/2DXFn13)
* [Uncle Bill's Sliver Gripper](http://amzn.to/2n1dr4c)
* [Olight i3E EOS AAA Flashlight](http://amzn.to/2DCZ3tp)
* [Widgy Pico Pry Bar](https://countycomm.com/products/widgy-pry-bars)
* [Mini Carabiners](http://amzn.to/2GjZo2N)
* [Nite Ize S-Biner #2 Stainless](http://amzn.to/2GlKjO6)
* [Vargo Titanium Water Bottle](http://amzn.to/2n1O1n0)
* [Weego Jump Starter 22s](http://amzn.to/2DybaIa)

[macos]: https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/macappstore-sm.svg
[ios]: https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-sm.svg
21 changes: 19 additions & 2 deletions src/templates/page.js
@@ -1,21 +1,38 @@
import React from "react"
import Date from "../components/Date"
import Meta from "../components/Meta"

export default ({ data }) => {
const { markdownRemark: post } = data
const { date, updated, title } = post.frontmatter
return (
<article>
<h2>{post.frontmatter.title}</h2>
<h1>{title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
{!!date && (
<Meta>
<em>
{updated ? "Originally posted" : "Posted"} <Date date={date} />
{updated && (
<React.Fragment>
<br />Updated <Date date={updated} />
</React.Fragment>
)}
</em>
</Meta>
)}
</article>
)
}

export const aboutPageQuery = graphql`
query AboutPage($path: String!) {
query Page($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
path
date
updated
title
}
}
Expand Down
8 changes: 3 additions & 5 deletions src/templates/post.js
@@ -1,6 +1,7 @@
import React from "react"
import Helmet from "react-helmet"
import Date from "../components/Date"
import Meta from "../components/Meta"
import Tags from "../components/Tags"

export default function Template({ data }) {
Expand All @@ -10,19 +11,16 @@ export default function Template({ data }) {
<Helmet title={`Blog | ${post.frontmatter.title}`} />
<article>
<h1>{post.frontmatter.title}</h1>
<div className="post-meta">
<Meta>
Posted <Date date={post.frontmatter.date} /> under{" "}
<Tags tags={post.frontmatter.tags} />
</div>
</Meta>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
<style jsx>{`
h1 {
margin-bottom: 0;
}
.post-meta {
font-size: 0.8em;
}
`}</style>
</React.Fragment>
)
Expand Down

0 comments on commit c1a8f7a

Please sign in to comment.