如何搭建es6开发环境

node.js安装

1. 此过程没有难点，略过
2. 下载完成后能够经过node -v和npm -v来查看是否安装成功以及版本后

webpack 安装

1. 新建一个目录(项目名称), 进入该项目，npm init, 而后一路回车便可。(会生成一个package.json文件)
2. 在根目录下建立src目录，并在src目录下建立index.js文件
3. 在项目的根目录下执行 npm install webpack webpack-cli --save-dev
4. npm install webpack-dev-server html-webpack-plugin --save-dev

   webpack-dev-server是启动一个本地的服务，html-webpack-plugin是一个插件，用来使用html的模板

5. 在根目录下建立webpack.dev.config.js文件

6. 编辑package.json文件：

   "scripts": {

   "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

   }

安装babel相关插件

1. npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

2. 在项目的根目录下建立.babelrc

   {

   "presets": ["es2015", "latest"],
   "plugins": []

   }

修改webpack.dev.config.js 并运行

1. 在webpack.dev.config.js种添加内容

   const path = require("path");
   const HtmlWebpackPlugin = require("html-webpack-plugin");
   module.exports = {
       entry: './src/index.js',// 入口文件
       output: {
           path: __dirname,
           filename: './release/bundle.js'
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './index.html'
           })
       ],
       devServer: {
          contentBase: path.join(__dirname,'./release'), //运行的目录
          open: true, // 自动刷新浏览器
          port: 9002 // 端口号
       }
   }

2. 如今就能够在src下的index.js中写es6代码啦
3. 运行npm run dev; 能够看到会自动访问 localhost:9002