webpack.md

   1 ---
   2 title: Webpack
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 updated: 2017-09-26
   6 intro: |
   7   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.
   8 ---
   9
  10 ### Basic config
  11
  12 #### webpack.config.js
  13
  14 ```js
  15 module.exports = {
  16   context: __dirname,
  17   entry: 'src/app.js',
  18   output: {
  19     path: __dirname + '/public',
  20     filename: 'app.js'
  21   }
  22 }
  23 ```
  24
  25 #### Terminal
  26
  27 ```bash
  28 npm install --save-dev webpack
  29 ```
  30
  31 | `webpack` | build
  32 | `webpack -- -p` | build production
  33 | `webpack -- --watch` | compile continuously
  34
  35 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.)
  36
  37 ### Multiple files
  38
  39 #### webpack.config.js
  40
  41 ```js
  42 module.exports = {
  43   entry: {
  44     app: 'src/app.js',
  45     vendor: 'src/vendor.js'
  46   },
  47   output: {
  48     path: __dirname + '/public',
  49     filename: '[name].js'
  50   }
  51 }
  52 ```
  53 {: data-line="2,3,4,8"}
  54
  55 This creates `app.js` and `vendor.js`.
  56
  57 ## Loaders
  58
  59 ### Babel
  60
  61 #### Terminal
  62
  63 ```bash
  64 npm install --save-dev \
  65   babel-loader \
  66   babel-preset-env \
  67   babel-preset-react
  68 ```
  69
  70 #### webpack.config.js
  71
  72 ```js
  73 module.exports = {
  74   ···
  75   module: {
  76     rules: [
  77       { test: /\.js$/,
  78         exclude: /node_modules/,
  79         use: [
  80           { loader: 'babel-loader' }
  81         ]
  82       }
  83     ]
  84   }
  85 }
  86 ```
  87 {: data-line="3,4,5,6,7,8"}
  88
  89 #### .babelrc
  90
  91 ```js
  92 {
  93   "presets": [ "env", "react" ]
  94 }
  95 ```
  96
  97 Adds support for [Babel](http://babeljs.io).
  98
  99 ### CSS
 100
 101 #### Terminal
 102
 103 ```bash
 104 npm install --save-dev \
 105   css-loader \
 106   style-loader
 107 ```
 108
 109 #### webpack.config.js
 110
 111 ```js
 112 module.exports = {
 113   ···
 114   module: {
 115     rules: [
 116      { test: /\.css$/,
 117        exclude: /node_modules/,
 118        use: [
 119          { loader: 'style-loader' },
 120          { loader: 'css-loader' }
 121        ]
 122       }
 123     ]
 124   }
 125 }
 126 ```
 127 {: data-line="3,4,5,6,7,8,9"}
 128
 129 #### Your JavaScript
 130
 131 ```js
 132 import './styles.css'
 133 // or:
 134 require('./styles.css')
 135 ```
 136
 137 This allows you to use CSS inside your JavaScript. This packages your CSS inside your JavaScript bundle.
 138
 139 ### PostCSS
 140
 141 #### Terminal
 142
 143 ```
 144 npm install --save-dev \
 145   postcss-loader \
 146   postcss-cssnext
 147 ```
 148
 149 #### webpack.config.js
 150
 151 ```js
 152 ···
 153 // Inside module.rules[]:
 154 { test: /\.css$/,
 155   exclude: /node_modules/,
 156   use: [
 157     { loader: 'style-loader' },
 158     { loader: 'css-loader' },
 159     { loader: 'postcss-loader' }
 160 ···
 161 ```
 162 {: data-line="8"}
 163
 164 #### postcss.config.js
 165
 166 ```js
 167 module.exports = {
 168   plugins: [
 169     require('postcss-cssnext')()
 170   ]
 171 }
 172 ```
 173 {: data-line="3"}
 174
 175 This example adds [postcss-cssnext](https://www.npmjs.com/package/postcss-cssnext) support to your CSS files.
 176
 177 ## Other features
 178
 179 ### Dev server
 180
 181 #### package.json
 182
 183 ```json
 184 { ···
 185   "scripts": {
 186     "dev": "webpack-dev-server"
 187   }
 188 }
 189 ```
 190 {: data-line="3"}
 191
 192 #### Terminal
 193
 194 ```bash
 195 npm install --save-dev \
 196   webpack-dev-server
 197 ```
 198
 199 ```bash
 200 npm run dev
 201 ```
 202
 203 This starts an HTTP server for development (port 8080 by default).