webpack Get Started

webpack

webpack is module bundler. Build management and Run local server to test it. webpack becomes more popular these days like Gulp.

webpack handles javascript as module.

Install webpack

Install globally, use node npm

npm install -g webpack

Simple js project with webpack

This project is simple webpack project.
Prepare 2 js which have dependencies.
webpack resolve these dependencies and build them as one js file

This is project structure

project
|- index.html
|- webpack.config.js
|- src
     |- main.js
     |- sub.js

webpack.config.js

This is webpack configuration file.
Add entry javascript and build setting and plugin(loader) setting are there

module.exports = {
  entry: "main.js",
  output: {
    path: "./",
	filename: "bundle.js"
  }
};

entry is entry javascript
webpack resolved dependencies, in this case, main.js uses sub.js

main.js

var sub = require("./sub");
sub.hello();

require is to import other js

sub.js

module.exports.hello = function() {
    alert('Hello');
}

export method to use in main.js

index.html

We use compiled javascript(dist/build.js)

<!DOCTYPE html>
<head>
    <title>Webpack</title>
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>
<h3>Test</h3>
</body>
</html>

build

Source files were done. Next is prepare build.
webpack builds based on webpack.config.js
This file includes build setting.
To build type following

webpack

If there are no problems, dist/bundle.js is generated.
After it, you can open html file with this bundle

CSS

Next is CSS.
To import css as one js file, we can reduce source files.
It means that css files are imported into one javascript file.

To work with css, we need to use style-loader and css-loader

npm install --save-dev style-loader css-loader

Add CSS compile setting to webpack.config.js

module.exports = {
  entry: "./src/main.js",
  output: {
      path: "dist",
      filename: "bundle.js"
  },

  module: {
      loaders: [
          {
              test: /\.css/,
              loaders:["style-loader", "css-loader"]
          }
      ]
  }
};

The target is all css file and loaders are style-loader, and css-loader

Prepare css

project
|- index.html
|- webpack.config.js
|- src
|   |- main.js
|   |- sub.js
|- styles
     |- style.css

Build

webpack

dist/bundle.js includes css, you don’t need to change html file.

TypeScript, Sass

For Sass addition to style-loader and css-loader, sass-loader is required.

npm install --save-dev sass-loader

For TypeScript, we need ts-loader

npm install --save-dev ts-loader

Project structure

project
|- index.html
|- webpack.config.js
|- src
|   |- main.ts
|
|- styles
|     |- index.scss
|- tsconfig.json

webpack.config.js

We need sass-loader, ts-loader

module.exports = {
    entry: "./src/main.ts",
    output: {
        path: "dist",
        filename: "bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.scss/,
                loaders:["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.ts/,
                loaders: ["ts-loader"]
            }
        ]
    }
}

We have two loaders, css group and typescript group.

For typescript, we need tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

Set up for commonjs, and es5

main.ts

declare function require(string): any;

require("../styles/index.scss");

class Main {
    constructor() {
        alert("TypeScript");
    }
}
new Main();

Ref

ICS media