Webpack intro – The Problem – How does webpack work?

View Github Repository Open presentation in a new window

raingxm

See all presentation from raingxm

Webpack intro – The Problem – How does webpack work?

0 0

webpack-session

introduce webpack to my team

On Github raingxm / webpack-session

Webpack intro

Created by zhangxu

The Problem

  • File Size
  • Requests
Different Situation

Two Concerns

  • Packaging Concern (Developers Aspect)
  • Loading Concern (Browsers)

Webpack

What is module bundler

a.js 
                        
                            var b = require('./b.js');
                            console.log(b);
b.js 
                        
                            module.exports = 42;

bundle

bundle.js can now executed in browser

How does webpack work?

command line

                            $ webpack entry output
                        
                            $ webpack ./a.js bundle.js

use config file

                            $ webpack --config "path to config file"
                        
                            
moudle.exports = {
    entry: path.resove(__dirname, "./a.js"),

    output: {
        path: __dirname,
        filename: "bundle.js"
    }
};

default config file webpack.config.js

bundle.js file

  • A small module system at the beginning
  • File names are transformed to ids
What about different module styles
CommonJS 
                            
var moudleA = require("./a.js");
module.exports = 42;
AMD 
                            
define(["./a.js"] , function (moduleA) {
    return 42;
});
ES6 modules 
                            
import someModule from "./someModule.js";
export default 42;

websites are not just javascript

  • html
  • css
  • images
What if we want require everything
Loaders Loaders are transformations that are applied on files. They preprocess files. For instance they can transform CoffeeScript to JavaScript. webpack.github.io/docs/loaders.html
raw-loder 
                            
<div class="hello-world">
    <h1>Hello World</h1>
</div>
transform to 
                            
module.exports = "<div class="\"hello-world\"">\n
            <h1>Hello world</h1>\n</div>";
How are loaders applied?
First we need install it 
                            
$ npm install css-loader style-loader --save
Inline 
                            
require("style!css!./style.css");
via config 
                            
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: "!style!css" }
        ]
    }
};

Let's code

Demo3

                        
$ https://github.com/raingxm/webpack-demo3.git
                        
                    
                        
$ npm install

Demo4

                            
$ https://github.com/Workfront/webpack-start.git

Demo5

                            
$ https://github.com/Workfront/webpack-time-logger.git

Demo6

                             
$ https://github.com/jesseskinner/react-webpack-demo.git

THE END

Webpack intro Created by zhangxu