<!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 reactERROR 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
