1.依据你的作业系统安装 Node 和 NPM(目前版本的 Node 都会内建 NPM)
2.透过 NPM 安装 Webpack、webpack loader、webpack-dev-server// 按指示初始化 NPM 设定档 package.json
$ npm init
// --save-dev 是可以让你将安装套件的名称和版本资讯存放到 package.json,方便日后使用
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server
3.在根目录设定 webpack.config.js
// 这边使用 HtmlWebpackPlugin,将 bundle 好的 <script> 插入到 body。${__dirname} 为 ES6 语法对应到 __dirname
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: 'index.html',
inject: 'body',
});
module.exports = {
// 档案起始点从 entry 进入,因为是阵列所以也可以是多个档案
entry: [
'./app/index.js',
],
// output 是放入产生出来的结果的相关参数
output: {
path: `${__dirname}/dist`,
filename: 'index_bundle.js',
},
module: {
}}
4.
在根目录设定
.babelrc
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
5. 安装 react 和 react-dom
$ npm install --save react react-dom
6.撰写 Component(记得把
index.html
以及 index.js
放到 app
资料夹底下喔!)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Setup</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- 欲插入 React Component 的位置 -->
<div id="app"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
7
-
在终端机使用
webpack
进行成果展示,webpack 相关指令:-
webpack:会在开发模式下开始一次性的建置
-
webpack -p:会建置 production 的程式码
-
webpack --watch:会监听程式码的修改,当储存时有异动时会更新档案
-
webpack -d:加入 source maps 档案
-
webpack --progress --colors:加上处理进度与颜色
如果不想每次都打一长串的指令码的话可以使用
package.json
中的scripts
设定"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }
然后在终端机执行:
$ npm run dev
-
当我们此时我们可以打开浏览器输入
http://localhost:8008
,就可以看到 Hello, world!
了