webpack開發react經常使用插件和依賴

1、配置webpack

1.npm install -g webpack  #webpack的cli環境
2.npm install -g webpack-dev-server #webpack自帶的服務器

2、各類依賴庫

1.npm install babel-core-D  #後臺編譯的babel工具
2.npm install babel-preset-es2015 -D #babel對es2015的預設
3.npm install babel-loader -D  #babel加載器

3、webpack自己

1.npm install webpack-dev-server -D #webpack服務器的本地依賴
2.npm install babel-preset-react -D #babel-react預設
3.npm install react -D #react自己
4.npm install react-dom -D #react-dom自己
5.npm install react-hot-loader -D #熱更新
6.npm install style-loader -D
7.npm install css-loader -D

4、webpack配置文件(webpack.config.js)

module.exports={
    entry:'./index.js',  //入口文件
    output:{
        path:__dirname,
        filename:'bundle.js'//編輯完的文件叫什麼
    },
    devtool:'source-map',//開發工具，防止調試的時候找不到源碼在哪兒
    module:{//用到的模塊
        loader:{[
            {test:/\.css$/,loader:'style!css'},//以css結尾的文件加載cssloader
            {test:/\.js$/,loader:'react-hot!babel',exclude:/node_module/}//exclude是排除的意思
        ]}
    }
}

5、配置babel(.baberc文件)

{
    "presets":["es2015","react"]
}
or
{
    "presets":["es2015","stage-0"]
}

 6、附一份webpack+angularjs項目的package.json文件

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "entry": {
    "index": "./src/index.js"
  },
  "dependencies": {
    "angular": "^1.6.2",
    "angular-messages": "^1.6.2",
    "angular-ui-router": "^0.4.2",
    "echarts": "^3.5.1",
    "jqcloud2": "^2.0.2",
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "body-parser": "^1.17.1",
    "cookie-parser": "^1.4.3",
    "css-loader": "^0.26.1",
    "express": "^4.15.2",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "less-loader": "^2.2.3",
    "mockjs": "^1.0.1-beta3",
    "morgan": "^1.8.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.3.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}