文章目录
  1. 1. Defined
  2. 2. webpack.config.js
  3. 3. generate a bundle.js
  4. 4. With Bable
  5. 5. With React
  6. 6. Watchman for jsx && React Hot Loader
  7. 7. npm package(verb.)
  8. 8. Simple demo in github
  9. 9. EOF

Defined

Learn from: https://www.codementor.io/tamizhvendan/tutorials/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
and http://www.infoq.com/cn/articles/react-and-webpack

This is a note for learning webpack + react + jsx + babel loader

webpack.config.js

The APP_DIR holds the directory path of the React application’s codebase. The BUILD_DIR represents the directory path of the bundle file output.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const webpack = require('webpack');
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, 'public/'); // the directory shown to others
const APP_DIR = path.resolve(__dirname, 'app/');

const config = {
entry: APP_DIR + '/index.jsx', // entrance file
output: {
path: BUILD_DIR,
filename: 'bundle.js' // filename after packaged
}
};

module.exports = config;

generate a bundle.js

1
$ webpack -d

With Bable

install

1
npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -S

settings .babelrc

1
2
3
4
5
6
{
"presets" : [
"es2015",
"react"
]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Existing Code ....
var config = {
// Existing Code ....
module: {
loaders: [
{
test: /\.jsx?$/,
include: APP_DIR,
exclude: /node_modules/,
loader: 'babel-loader',
query:
{
presets: ['react', 'es2015']
}
}
]
}
}

With React

npm

1
$ npm i react react-dom -S

index.jsx(import module)

1
2
import React from 'react';
import {render} from 'react-dom';

Watchman for jsx && React Hot Loader

1
$ webpack -d --watch

react-hot-loader

1
$ npm install react-hot-loader --save-dev

config: should click the click to learn more!

1
2
3
4
5
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }
]
}

npm package(verb.)

package.json

1
2
3
4
5
6
{
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p"
}
}

usage:
npm run dev, npm run build

Simple demo in github

Github-React-with-webpack

EOF

Webapack is a wonderful tool!

文章目录
  1. 1. Defined
  2. 2. webpack.config.js
  3. 3. generate a bundle.js
  4. 4. With Bable
  5. 5. With React
  6. 6. Watchman for jsx && React Hot Loader
  7. 7. npm package(verb.)
  8. 8. Simple demo in github
  9. 9. EOF