配置redux react 以及webpack
2016-05-16 16:56
736 查看
配置下环境先,记得➕‘--dev'的就是运行在开发模式的,在开发模式普通dependecies也能用
npm init
npm install //no need to npm install actually because we're in the initilization process.
npm install webpack --save-dev
npm install --save path
npm install react --save-dev
npm install react-dom --save-dev
npm install --save-dev babel-loader@6.2.1
npm install --save-dev babel-core@6.4.5
npm install --save-dev babel-preset-es2015@6.3.13
npm install --save-dev babel-preset-react@6.3.13
npm install --save-dev babel-preset-stage-2 //可以用上ES6的语法
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
为了方便,加个webpack server
npm i webpack-dev-server
这就把环境配好了。。
webpack把静态资源文件称为模块,
我们设置下webpack:
entry定义了输入文件,可以是单个文件,也可以是数组。
output 定义了输出文件路径和名字 上面的结果就会输出为在当前目录下,有page1.bundle.js and page2.bundle.js
另外publicPath是网站运行时的访问路径
resolve是自动补全后缀: require('common')就会补全为require('common.js')
loader在module(模块)下面,所以说webpack把静态资源都称为模块。
那么webpack模块异步加载咋搞?
用它提供的require.ensure
所以在进入某个功能, 页面的时候就可以再加载下啦。
好像需要定义chunkFilename,这个再议。
我的package json:
就可以玩啦
npm init
npm install //no need to npm install actually because we're in the initilization process.
npm install webpack --save-dev
npm install --save path
npm install react --save-dev
npm install react-dom --save-dev
npm install --save-dev babel-loader@6.2.1
npm install --save-dev babel-core@6.4.5
npm install --save-dev babel-preset-es2015@6.3.13
npm install --save-dev babel-preset-react@6.3.13
npm install --save-dev babel-preset-stage-2 //可以用上ES6的语法
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
为了方便,加个webpack server
npm i webpack-dev-server
这就把环境配好了。。
webpack把静态资源文件称为模块,
我们设置下webpack:
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: { "page1" : "./entry.js", "page2" : [".entry2.js",".entry3.js"] } output: { path: __dirname, publicPath: "/output/" filename: "[name].bundle.js" }, resolve: { extensions: ['', '.js', '.jsx'], }, module: { loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets:[ 'es2015', 'react', 'stage-2' ] } } ] } };
1 resolve:{ 2 extensions:['','.js','.json'] 3 }
entry定义了输入文件,可以是单个文件,也可以是数组。
output 定义了输出文件路径和名字 上面的结果就会输出为在当前目录下,有page1.bundle.js and page2.bundle.js
另外publicPath是网站运行时的访问路径
resolve是自动补全后缀: require('common')就会补全为require('common.js')
loader在module(模块)下面,所以说webpack把静态资源都称为模块。
那么webpack模块异步加载咋搞?
用它提供的require.ensure
所以在进入某个功能, 页面的时候就可以再加载下啦。
好像需要定义chunkFilename,这个再议。
我的package json:
{ "name": "todos", "version": "1.0.0", "description": "react redux todos", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.4.5", "babel-loader": "^6.2.1", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-2": "^6.5.0", "react": "^15.0.2", "react-dom": "^15.0.2", "redux-devtools": "^3.3.1", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" }, "dependencies": { "path": "^0.12.7", "react-redux": "^4.4.5", "redux": "^3.5.2" } }
就可以玩啦
相关文章推荐
- webpack bable-loader升级无法编译jsx es6
- 00
- Redux系列01:从一个简单例子了解action、store、reducer
- Redux系列x:源码分析
- Redux系列02:一个炒鸡简单的react+redux例子
- 超级给力的JavaScript的React框架入门教程
- JavaScript的React框架中的JSX语法学习入门教程
- 由ReactJS的Hello world说开来
- 深入探讨前端框架react
- 深入浅析react native es6语法
- Windows下React Native的Android环境部署及布局示例
- 深入理解JavaScript的React框架的原理
- Webpack 实现 Node.js 代码热替换
- Webpack 实现 AngularJS 的延迟加载
- 在React框架中实现一些AngularJS中ng指令的例子
- H5、React Native、Native应用对比分析
- ReactJS学习笔记——npm、JSX、webpack
- react Native 运行程序报错解决笔记
- CSS Modules 详解及 React 中实践
- 初体验react的状态机