<!doctype html>
<html>
<head>
  <title>Demo</title>

  <script>
    jQuery(function(){
      jQuery('.title-tipso').tipso();
    });
  </script>
</head>

<body>
  Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
  <title>Demo</title>

  <script src="vendor/jquery.js"></script>
  <script src="vendor/tipso.js"></script>
  <script>
    jQuery(function(){
      jQuery('.title-tipso').tipso();
    });
  </script>
</head>

<body>
  Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
  <title>Demo</title>

  <script src="vendor/jquery.js"></script>
  <script src="vendor/tipso.js"></script>
  <script>
    jQuery(function(){
      jQuery('.title-tipso').tipso();
    });
  </script>
</head>

<body>
  Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
  <title>Demo</title>

  <script src="vendor/tipso.js"></script>
  <script src="vendor/jquery.js"></script>
  <script>
    jQuery(function(){
      jQuery('.title-tipso').tipso();
    });
  </script>
</head>

<body>
  Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
// CommonJS
var dep = require("dependency")

dep.doSomething();
// webpack.config.js
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    }
}
//webpack.config.js

module.exports = {
    ...
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      }
    ]
}
//webpack.config.js

module.exports = {
    ...
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      }
    ],
    resolve: {
      extensions: ['', '.js', '.json', '.jsx']
    }
}
//webpack.config.js

module.exports = {
    ...
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      }
    ]
}
//webpack.config.js

module.exports = {
    ...
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, "app/helpers"),
          path.resolve(__dirname, "app/components")
        ]
      }
    ]
}
// webpack.config.js

module.exports = {
    ...
    loaders: [
      ...
      { 
        test:
          /\.css$/,
          loader: "style-loader!css-loader"
      }
    ]
}
// component.js

require("./styles.css");
/* styles.css */
local:(.foo) {
  color: purple;
}
// component.js
var styles = require("./styles.css");

var Component = React.createClass({
  render: function() {
    <div className={styles.foo}>
      Text is purple
    </div>
  }
})
/* exported CSS */
._23_aKvs-b8bW2Vg3fwHozO {
  color: purple;
}
//webpack.config.js

module.exports = {
    ...
    loaders: [
      {
        test: /\.png$/, 
        loader: "url-loader?limit=100000"
      }
    ]
}
~/app $ mv components/dep ../
~/app $ cd ../dep
~/dep $ npm init
~/dep $ npm link
~/dep $ cd ../app
~/app $ npm link dep
//webpack.config.js in application

module.exports = {
  resolve: {
    fallback: path.join(__dirname, "node_modules")
  },
  resolveLoader: {
    fallback: path.join(__dirname, "node_modules")
  }
}
TypeError: deepestAncestor is undefined
~/dep $ rm -r react
ERROR in ../dep.js
Module not found: Error: Cannot resolve module 'react' in /dep/build
//webpack.config.js in dependency

module.exports = {
  entry: './Component.jsx',
  output: {
    path: './build',
    filename: 'component.js',
    library: 'Component',
    libraryTarget: 'umd'
  },
  externals: {
    react: {
      root: 'React',
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react'
    }
  },
  loaders: [...]
}

Making small modules actually work with Webpack and npm

By Lin Clark

Making small modules actually work with Webpack and npm

  • 12,093