webpack: update

webpack.md

@@ -1,47 +1,203 @@
 ---
 title: Webpack
 category: JavaScript libraries
+layout: 2017/sheet
+updated: 2017-09-26
+intro: |
+  This is a very basic "getting started with Webpack" guide for use with [Webpack](https://webpack.js.org) v3. This doesn't cover all features, but it should get you started in understanding the config file format.
 ---
 
-### Config
+### Basic config
 
-* webpack.config.js
+#### webpack.config.js
 
-### Multiple entries
+```js
+module.exports = {
+  context: __dirname,
+  entry: 'src/app.js',
+  output: {
+    path: __dirname + '/public',
+    filename: 'app.js'
+  }
+}
+```
 
-    entry: {
-      app: './app.js',
-      vendor: './vendor.js'
-    }
+#### Terminal
 
-### Output
+```bash
+npm install --save-dev webpack
+```
 
-    output: {
-      path: __dirname + '/public/assets',
-      filename: '[name].js'
-      /* also: [id] [hash] */
-      chunkFilename: "[id].chunk.js"
+| `webpack` | build
+| `webpack -- -p` | build production
+| `webpack -- --watch` | compile continuously
 
-      libraryTarget: 'var' | 'this' | 'commonjs' | 'commonjs2' | 'amd' | 'umd'
-    }
+This compiles `src/app.js` into `public/app.js`. (Note: you may need to use `./node_modules/.bin/webpack` as a command if you're not invoking Webpack via npm scripts.)
 
-### Module
+### Multiple files
 
-    module: {
-      loaders: [ ... ]
-      preLoaders: [ ... ]
-      postLoaders: [ ... ]
-    }
+#### webpack.config.js
 
-### Resolve
+```js
+module.exports = {
+  entry: {
+    app: 'src/app.js',
+    vendor: 'src/vendor.js'
+  },
+  output: {
+    path: __dirname + '/public',
+    filename: '[name].js'
+  }
+}
+```
+{: data-line="2,3,4,8"}
 
-    resolve: {
-      alias: {
-        'xyz': './foo.js'
-      }
-      modulesDirectories: [
-        'node_modules',
-        'web_modules' ]
+This creates `app.js` and `vendor.js`.
+
+## Loaders
+
+### Babel
+
+#### Terminal
+
+```bash
+npm install --save-dev \
+  babel-loader \
+  babel-preset-env \
+  babel-preset-react
+```
+
+#### webpack.config.js
+
+```js
+module.exports = {
+  ···
+  module: {
+    rules: [
+      { test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: 'babel-loader' }
+        ]
       }
+    ]
+  }
+}
+```
+{: data-line="3,4,5,6,7,8"}
 
-    }
+#### .babelrc
+
+```js
+{
+  "presets": [ "env", "react" ]
+}
+```
+
+Adds support for [Babel](http://babeljs.io).
+
+### CSS
+
+#### Terminal
+
+```bash
+npm install --save-dev \
+  css-loader \
+  style-loader
+```
+
+#### webpack.config.js
+
+```js
+module.exports = {
+  ···
+  module: {
+    rules: [
+     { test: /\.css$/,
+       exclude: /node_modules/,
+       use: [
+         { loader: 'style-loader' },
+         { loader: 'css-loader' }
+       ]
+      }
+    ]
+  }
+}
+```
+{: data-line="3,4,5,6,7,8,9"}
+
+#### Your JavaScript
+
+```js
+import './styles.css'
+// or:
+require('./styles.css')
+```
+
+This allows you to use CSS inside your JavaScript. This packages your CSS inside your JavaScript bundle.
+
+### PostCSS
+
+#### Terminal
+
+```
+npm install --save-dev \
+  postcss-loader \
+  postcss-cssnext
+```
+
+#### webpack.config.js
+
+```js
+···
+// Inside module.rules[]:
+{ test: /\.css$/,
+  exclude: /node_modules/,
+  use: [
+    { loader: 'style-loader' },
+    { loader: 'css-loader' },
+    { loader: 'postcss-loader' }
+···
+```
+{: data-line="8"}
+
+#### postcss.config.js
+
+```js
+module.exports = {
+  plugins: [
+    require('postcss-cssnext')()
+  ]
+}
+```
+{: data-line="3"}
+
+This example adds [postcss-cssnext](https://www.npmjs.com/package/postcss-cssnext) support to your CSS files.
+
+## Other features
+
+### Dev server
+
+#### package.json
+
+```json
+{ ···
+  "scripts": {
+    "dev": "webpack-dev-server"
+  }
+}
+```
+{: data-line="3"}
+
+#### Terminal
+
+```bash
+npm install --save-dev \
+  webpack-dev-server
+```
+
+```bash
+npm run dev
+```
+
+This starts an HTTP server for development (port 8080 by default).