3 category: JavaScript libraries
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.
12 #### webpack.config.js
19 path: __dirname + '/public',
28 npm install --save-dev webpack
32 | `webpack -- -p` | build production
33 | `webpack -- --watch` | compile continuously
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.)
39 #### webpack.config.js
45 vendor: 'src/vendor.js'
48 path: __dirname + '/public',
53 {: data-line="2,3,4,8"}
55 This creates `app.js` and `vendor.js`.
64 npm install --save-dev \
70 #### webpack.config.js
78 exclude: /node_modules/,
80 { loader: 'babel-loader' }
87 {: data-line="3,4,5,6,7,8"}
93 "presets": [ "env", "react" ]
97 Adds support for [Babel](http://babeljs.io).
104 npm install --save-dev \
109 #### webpack.config.js
117 exclude: /node_modules/,
119 { loader: 'style-loader' },
120 { loader: 'css-loader' }
127 {: data-line="3,4,5,6,7,8,9"}
132 import './styles.css'
134 require('./styles.css')
137 This allows you to use CSS inside your JavaScript. This packages your CSS inside your JavaScript bundle.
144 npm install --save-dev \
149 #### webpack.config.js
153 // Inside module.rules[]:
155 exclude: /node_modules/,
157 { loader: 'style-loader' },
158 { loader: 'css-loader' },
159 { loader: 'postcss-loader' }
164 #### postcss.config.js
169 require('postcss-cssnext')()
175 This example adds [postcss-cssnext](https://www.npmjs.com/package/postcss-cssnext) support to your CSS files.
186 "dev": "webpack-dev-server"
195 npm install --save-dev \
203 This starts an HTTP server for development (port 8080 by default).