TreeviewCopyright © aleen42 all right reserved, powered by aleen42
Webpack + React Back
For my familiarity, I'll build up with react projects with the following file structure:
project
src
components
*_entry.js
build
webpack.config.js
*.html
Files of sites like (*.html) will be placed in the root of this project or if using Laravel, the place will be other one outside this project. Files emitted by webpack will be in /build, and imported by sites. Then, here I would like to use a case for teaching how to use webpack to bundle files with different dependencies in a React project.
1. Initialize a npm project
npm init # (answer the questions)
2. Install webpack as a development dependency, and global as well
npm install webpack --save-dev
sudo npm install webpack -g
3. Install loaders and dependencies
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-loader --save-dev
npm install babel-polyfill --save
npm install react --save
npm install react-dom --save
Optional
npm install css-loader --save-dev
npm install file-loader --save-dev
npm install json-loader --save-dev
npm install react-markdown-loader --save-dev
npm install style-loader --save-dev
npm install url-loader --save-dev
npm install font-awesome --save
npm install underscore --save
4. Set up a configuration file for webpack webpack.config.js
module.exports = {
entry: './src/entry.js',
output: {
path: __dirname + '/build',
filename: 'entry.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
};
- entry: the entry point of a script
- output: point out where to emit files bundled by webpack
- resolve: point out which type of files can be import, e.g.
import TickTock from './components/ticktock'
5. Write certain JavaScript files
\/src\/components\/ticktock.jsx
import React from 'react';
export class TickTock extends React.Component {
constructor(props) {
super(props);
this.state = { count: props.initialCount };
this.tick = this.tick.bind(this);
}
tick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div onClick={this.tick}>
Clicks: {this.state.count}
</div>
);
}
}
TickTock.propTypes = { initialCount: React.PropTypes.number };
TickTock.defaultProps = { initialCount: 0 };
\/src\/entry.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { TickTock } from './components/ticktock';
ReactDOM.render(
<TickTock />,
document.getElementById('content')
);
6. Import the entry into a html file
<!DOCTYPE html>
<html>
<head>
<title>Tick Example</title>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" src="build/entry.js"></script>
</body>
</html>
7. Run webpack to start to bundle:
webpack
If you want to listen to the compiling, you can use:
webpack -d --watch
Preview
As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.
Notice: This plugin has used Cookie to store your token with an expiration.