[webpack] 配置react+es6開發環境

寫在前面

每次開新項目都要從新安裝須要的包，簡單記錄一下。
如下僅包含最簡單的功能：

• 編譯react
• 編譯es6
• 打包src中入口文件index.js至dist

webpack配置react+es6開發環境

一、安裝react語法環境

npm install react react-dom --save

二、安裝webpack開發環境

npm install webpack --save-dev

三、安裝babel

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

四、安裝react轉換規則

npm install babel-preset-react --save-dev

五、安裝es6轉換規則

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

六、安裝es7轉換規則
ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個

npm install babel-preset-stage-0 --save-dev

npm install babel-preset-stage-1 --save-dev

npm install babel-preset-stage-2 --save-dev

npm install babel-preset-stage-3 --save-dev

七、配置.babelrc文件

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

八、建立webpack.config.js

var webpack = require("webpack");
var path = require("path");

var root = path.join(__dirname, "./");
var src = path.join(root, "./src");
var dist = path.join(root, "./dist");

module.exports = {
    entry: {
        "index": [path.join(__dirname, "./src/index.js")]
    },
    output: {
        path: dist, 
        filename: "/static/[name].js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: "babel"
            }
        ]
    },
    resolve: {
        extensions: ['', '.js']
    }
};

小結

以上只是最簡單的功能，記下來也只是備忘，並不能提升效率。以後會把以上功能寫成腳本，用於自動初始化不一樣類型的項目，主治懶癌晚期