Att snickra kod

lite kort om olika sätt att bygga din webb

Saxat från GitHub

webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

<html>
  <head>
    <link rel="stylesheet" href="/main.scss" />
  </head>
  <body>
    <script>
      let foo = `bar ${1+2}`;
      console.log(foo);  
    </script>
  </body>
</html>
src/
    main.js
    Person.js

    main.scss

index.html

src/
    main.js
    Person.js

    main.scss

index.html
package.json        <- WOW
webpack.config.js   <- WOW!!!

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.25.0",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js

module.exports = {
  entry: './src/main.js',
  output: {
    path: './build',
    publicPath: '/build/',
    filename: 'main.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.scss$/,
        loaders: [
          "style",
          "css",
          "sass"
        ]
      }
    ]
  }
}

entry


  entry: './src/main.js',

output



  output: {
    path: './build',
    publicPath: '/build/',
    filename: 'main.js'
  },

devtool








  devtool: 'source-map',

loaders










    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.scss$/,
        loaders: [
          "style",
          "css",
          "sass"
        ]
      }
    ]

webpack.config.js

module.exports = {
  entry: './src/main.js',
  output: {
    path: './build',
    publicPath: '/build/',
    filename: 'main.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.scss$/,
        loaders: [
          "style",
          "css",
          "sass"
        ]
      }
    ]
  }
}

src/
    main.js
    Person.js

    main.scss

index.html
package.json        <- WOW
webpack.config.js   <- WOW!!!
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="/build/main.js"></script>
  </body>
</html>

module.exports = class Person {
  constructor(name) {
    this.name = name;
    return this;
  }

  hello() {
    return `hej ${this.name}`;
  }
}
require('./main.scss');

let Person = require('./Person');
let daniel = new Person('Daniel');
document.body.innerHTML = daniel.hello();

body {
  color: red;
}

index.html

Person.js

main.scss

main.js


$ ./node_modules/.bin/webpack

$ ls build/
main.js		main.js.map

hej Daniel

Loaders

var settings = require('./settings/config.json');
console.log(settings.foo); // => "bar"
var template = require('./templates/data.html');
document.body.innerHTML = template;
var autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        test:   /\.css$/,
        loaders: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}
module.exports = {
  module: {
    loaders: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  }
}
module.exports = {
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'typescript-loader'
      }
    ]
  }
}

Finns massa mer att hitta

  • webpack-dev-server
  • env variabler
  • splitta js och css

Läs mer!

  • https://webpack.github.io/
  • https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460
  • https://webpack.github.io/docs/list-of-loaders.html

Webpack

By danielronnkvist

Made with Slides.com

Webpack

  • 160

More from danielronnkvist