使用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，看这篇就够了