腳手架構建項目

修改npm源爲淘寶源

npm config set registry "https://registry.npm.taobao.org"

vue腳手架

1. npm install -g vue-cli
2. vue list
3. vue init webpack name
4. cd name
5. npm install
6. npm run dev

React+Webpack+ES6環境搭建

1. npm install -g webpack 全局安裝webpack
2. npm init 自定義建立package.json
   npm init -yes 能夠建立默認的package.json
3. npm install webpack --save-dev 項目內安裝webpack
4. npm install react react-dom --save-dev 安裝react
5. npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
   安裝babel插件

6. webpack.config.js配置
   ```
   var path = require('path');
   var webpack = require('webpack');
   module.exports = {
   entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
   output: {
   path: path.resolve(__dirname, './build'),
   filename: 'bundle.js'
   },
   devServer: {
   inline: true,
   port: 8181
   },
   module: {
   loaders: [
   {
   test: /.js?$/,
   exclude: /(node_modules|bower_components)/,
   loader: 'babel',
   query: {
   presets: ['es2015', 'react']
   }

   }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

   };
   ```
7. npm install webpack-dev-server --save-dev

8. 在package.json文件中爲scripts添加
   "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }

react腳手架

1. npm install -g yo 安裝yo
2. yo --version 是否安裝成功
3. npm install -g generator-reactpackage
4. 建立項目 新建項目文件夾 yo reactpackage
5. npm run dev //項目開發過程使用，啓動服務，實時刷新
   npm run build //開發完成以後打包文件（js、css分開打包）

generator-react-webpack

1. npm install -g yo
2. npm install -g generator-react-webpack
3. 新建項目文件夾 "cd進去" yo react-webpack