Starting Webpack

What is webpack? webpack is a package bundler for your Javascript application.

There are four concepts to know, and it’s all about input and output.

Concepts

  • What is your input? entry
  • What is your output? output
  • What do you do with input? loaders
  • What do you do with output? plugins

Simple Example

index.js

import bar from './bar';
bar();

bar.js

export default function bar() {
//
}

webpack.config.js

module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
};

index.html

<html>
<head> ... </head>
<body>
...
<script src="bundle.js"></script> // this has index.js,
</body>
</html>

Getting Started

$ npm install --save-dev webpack 
## create a webpack.config.js
$ webpack

webpack.config.js

entry

module.exports = {
entry: './path/to/my/entry/file.js'
};

output

module.exports = {
...
output: {
filename: 'my-first-webpack.bundle.js'
}
};

loaders

module.exports = {
...
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader'}
]
}
}

plugins

module.exports = {
...
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}

webpack for development

$ npm install webpack-dev-server --save-dev
$ node_modules/.bin/webpack-dev-server

Demos

https://github.com/ruanyf/webpack-demos

$ git clone https://github.com/ruanyf/webpack-demos.git
$ cd webpack-demos
$ npm i
$ cd demo01
$ webpack-dev-server
Like what you read? Give Allen Kim a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.