-
npm init
-
npm install --save react react-dom babelify babel-preset-reac
-
npm install babel-preset-es2015 --save (save就是保存到配置文件中)
-
npm install -g webpack-dev-server 全局安装
-
npm install -g webpack 全局安装
-
npm install webpack-dev-server 项目本地安装(webpack-dev-server是一个小型的Node.js Express服务器,)
-
npm install webpack
-
npm install babel-loader --save
-
npm install babel --save
-
npm install babel-core --save
https://ant.design/docs/react/introduce-cn (ant design安装) -
npm install antd --save
-
npm install --save react-router
-
npm install react-router-dom --save(4v,需要安装react-router-dom)
-
npm install react-responsive --save(移动端适配)
-
npm install react-touch-loader(下拉刷新, 加载更多)
https://github.com/Broltes/react-touch-loader
less-loader,需要增加包less-loader和less包
- npm install less --save-dev
- npm install less-loader --save-dev
webpack.config.js 配置
{test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}
- npm install redux --save
根目录:webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/index.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
output: {
path: __dirname,
filename: "./src/bundle.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
最后运行:webpack
webpack-dev-server
webpack-dev-server --inline --hot(运行这个就可以了)
(webpack-dev-server --content-base build --inline --hot)
网友评论