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
备注: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'] 定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全
}
}
页面重定向
本项目使用tomcat作为服务器,从定向方式如下(如要配置404):
进入更目录新建WEB-INF目录,再新建web.xml配置文件,配置文件如下
<?xml version="1.0" encoding="ISO-8859-1"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,a
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<display-name>Welcome to Tomcat</display-name>
<description>
Welcome to Tomcat
</description>
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/</location>
</error-page>
</web-app>