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