1、首先下载Node.js,并配置好环境变量
nodejs下载链接 :https://nodejs.org/en/download/
2、安装全局包
由于“墙”的原因,建议使用淘宝的npm镜像,下载:npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install babel -g
$ cnpm install webpack -g
$ cnpm install webpack-dev-server -g
3、创建一个空项目
安装好后创建一个名叫 learn-webpack 的项目并进入该项目文件夹,
mkdir learn-webpack && cd learn-webpack 通过编辑器找到刚才创建的项目。
使用终端进入创建项目所在文件夹的的初始化环境
初始化 package.json,根据提示填写 package.json的相关信息
$ cnpm init
下载 webpack依赖, --save-dev表示将依赖添加到 package.json中的 'devDependencies' 对象中
$ cnpm install webpack --save-dev
下载完后,根目录会增加如下两个文件
继续使用终端安装需要的组件模块
$ cnpm install webpack-dev-server --save-dev
babel 相关的模块
$ cnpm install babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-polyfill --save-dev
react 相关的模块
$ cnpm install react-dom --save
在根目录新建文件 webpack.config.js
var path = require('path');
module.exports = {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
contentBase: './app',
port: 8090
},
entry : [
path.resolve(__dirname, 'app/main.jsx'),
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8090'
],
output : {
path : path.resolve(__dirname, 'build'),
filename:'bundle.js',
},
module: {
loaders: [
{
test: /\.js[x]$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-1', 'react']
}
},
{ test: /\.scss$/,loader: 'style!css!sass'},
// { test: /\.css$/,loader: 'style-loader!css-loader'},
]
}
};
main.jsx
// 'use strict'
// var component = require("./component.js");
// document.body.appendChild(component());
var React = require('react');
var ReactDom = require('react-dom');
var Rstas = require('./Rstas.jsx');
var Hello = React.createClass({
render : function render(){
return (
<div>
<span>
Hello {this.props.name}
</span>
<Rstas name='newxxxxxxx' />
</div>
)
}
});
ReactDom.render(
<Hello name="World" />,
document.getElementById('AppRoot')
);
module.exports = Hello;
Ratas.jsx
var React = require('react');
var Rstas = React.createClass({
render : function render(){
return <div>xxxx {this.props.name}</div>;
},
componentDidMount : function(){
console.log('.............');
console.log('.............');
console.log('.............');
console.log('.............');
}
});
module.exports = Rstas;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id='AppRoot'></div>
<script src="bundle.js"></script>
</body>
</html>
手动创建babel的配置文件(规范名称“.babelrc”)
{
"presets": [
"es2015",
"react",
],
"plugins": []
}
切换到终端,还是在之前的根目录输入$ cnpm run dev
没有报错后,切换到浏览器在地址栏输入 localhost:8090.
全部步骤都在这,在学习时出现别的错误百度一下基本都能解决。