react + webpack + ES6 环境搭建

    很喜欢react这个框架，最近也在摸索这个东西，官网的demo有点low，我还是喜欢用webpack这个工具来搭建前端的开发环境。这一篇记录一下package.json跟webpack的配置，其他插件可以自己去拓展成自己想要的项目就ok了。

   

package.json：

{

  "name": "my_react",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "张弋",

  "license": "ISC",

  "dependencies": {

    "react": "^15.4.2",

    "react-dom": "^15.4.2"

  },

  "devDependencies": {

    "babel": "^6.23.0",

    "babel-core": "^6.1.2",

    "babel-loader": "^6.3.2",

    "babel-plugin-transform-runtime": "^6.1.2",

    "babel-preset-es2015": "^6.22.0",

    "babel-preset-react": "^6.23.0",

    "babel-preset-stage-0": "^6.1.2",

    "babel-runtime": "^5.8.0",

    "css-loader": "^0.26.2",

    "style-loader": "^0.13.2",

    "url-loader": "^0.5.8",

    "webpack": "^2.2.1"

  }

}

webpack.config.js：

module.exports = {

    entry: './src/entry.js',//入口

    output: {//输出

        path: __dirname,

        filename: "./dist/bundle.js"

    },

    module: {

        loaders: [{

            test: /\.js?$/,//表示要变异的文件的类型，这里要编译的是js文件

            loader: 'babel-loader',//装载的哪些模块

            exclude: /node_modules/,//标示不变异node_modules文件夹下面的内容

            query: {//具体的编译的类型，

                compact: false,//表示不压缩

                presets: ['es2015', 'react']//我们需要编译的是es6和react

            }

        }]

    }

}