框架的流程:
1、下载安装Node.js
2、安装webpack(含服务器等) npm install webpack webpack-dev-server babel -g
- 注意:-g表示第一条命令是全局安装
3、添加package.json文件(目前只知道是放一些项目的描述信息),进入项目目录
命令:npm init
4、添加库文件(–save-dev:将依赖信息写入package.json的devdependencies),babel-polyfill可解决部分es6兼容问题
- 例子:npm install react react-dom –save-dev(多个插件空格分开)
所有库如下:
webpack
react
react-dom
babel-loader
less-loader
css-loader
style-loader
url-loader
file-loader
babel-preset-es2015
babel-preset-react
react-router
redux
react-redux
redux-devtools
redux-thunk
babel-polyfill
第三方UI
material-ui
react-tap-event-plugin
react-swipeable-views
5、跟目录新建webpack.config.js配置文件
6、打包:node进入你的项目跟目录执行打包命令:webpack –config webpack.config.js
- ps:webpack.config.js配置如下
var webpack=require('webpack');
module.exports={
devtool:'#eval-source-map',
//入口文件,多个的话将按顺序执行
entry:[
'babel-polyfill','./App/js/index.jsx'
],
output:{
path:'App', //打包后文件的存放路径
publicPath:'/App/', //服务器根路径
filename:'bundle.js' //打包后的文件名
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.less$/,loader:'style-loader!css-loader!less-loader'},
{test:/\.js?$/,loader:'babel',exclude: /node_modules/},
{
test:/\.jsx?$/,
loader:'babel',
exclude: /node_modules/,
query:{
presets:['es2015','react']
}
}
]
},
watch: true, //观察模式,每次修改保存webpack.config.js中引用文件,bundle.js的文件会自动更新
//指定可以被 require 的文件后缀,比如 Hello.js 这样的文件就可以直接用 require(./Hello) 引用
resolve:{
root:'',
extensions:['','.js','.jsx','.json','.less','.css'] 定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全
}
}