react 全家桶安装

windows 中的一些cmd命令

cd test         进入test文件夹  

cd ..           返回上一级  
md test         新建test文件夹  
cd.>cc.txt      新建cc.txt文件  
dir             列出文件夹下所有文件及文件夹  
md d:\test\myfolder   d盘下新建文件夹  



原文地址
https://github.com/brickspert/blog/issues/1




安装webpack 3.0
npm install --save-dev webpack@3
安装后使用的文件为：  webpack.dev.config.js
简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack


打包生成的资源文件提供Web服务。


npm install webpack-dev-server@2 --save-dev




让源代码显示出来
devtool: 'inline-source-map'


安装cssloader
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能；
npm install css-loader style-loader --save-dev


安装文件图片依赖
npm install --save-dev url-loader file-loader




安装babel
babel-core 调用Babel的API进行转码
babel-loader
babel-preset-es2015 用于解析 ES6
babel-preset-react 用于解析 JSX
babel-preset-stage-0 用于解析 ES7 提案


npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-


preset-react babel-preset-stage-0
安装后使用文件为： .babelrc
在webpack文件中还要在module>use要写入babel的依赖


安装HtmlWebpackPlugin
这个插件，每次会自动把js插入到你的模板index.html里面去。
npm install html-webpack-plugin --save-dev


文件压缩
npm i --save-dev uglifyjs-webpack-plugin


指定环境
module.exports = {
  plugins: [
       new webpack.DefinePlugin({
          'process.env': {
              'NODE_ENV': JSON.stringify('production')
           }
       })
  ]
}
npm run build后发现vendor.[hash].js又变小了。


优化缓存
plugins: [
        new webpack.HashedModuleIdsPlugin()
    ]
new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime'
})




安装react
npm install --save react react-dom
npm install --save react-router-dom
react热刷新 不改变state
npm install react-hot-loader@next --save-dev


安装redux
npm install --save redux
npm install --save react-redux （提供connect方法）
npm install --save redux-thunk  （这里涉及到redux中间件middleware）






按需加载
npm install bundle-loader --save-dev
做一个新的bundle文件，做router的按需加载