使用webpack快速搭建最簡單ES6環境

使用webpack快速搭建最簡單ES6環境
目錄如下：

myProject－－－|
　　　｜node_modules
　　　｜prd－－－｜
　　　　　｜build.js
　　　　　｜index.html
　　　｜src－－－｜
　　　　　｜index.js
　　　｜.babelrc
　　　｜package.json
　　　｜webpack.config.js

開始搭建，步驟如下：
第一步，安裝依賴包：

1. npm install -g webpack
2. npm init
3. npm install --save-dev webpack
4. npm install babel-loader --save-dev
5. npm install babel-core --save-dev
6. npm install babel-preset-es2015 --save-dev
   至此，完成js babel-loader的安裝。
7. npm install --save-dev webpack-dev-sever ：熱更新

第二步，配置文件：
.babelrc

{
    "presets": [
      "es2015"
    ],
    "plugins": []
}

webpack.config.js

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "prd/build.js"
  },
  module: {
    loaders: [
      { test: /\.js$/,loader: "babel-loader" }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [],
  devtool:'eval-source-map',
  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    colors: true,//終端中輸出結果爲彩色
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  } 
};

第三步，啓動服務

webpack -w

---

想要了解更多webpack相關知識，推薦點擊：
入門Webpack，看這篇就夠了