一.

新建好一个文件夹（比如ES6-demo）
打开文件夹，在文件夹中新建一个webpack.config.js
配置：

	const HtmlWebpackPlugin = require('html-webpack-plugin');
	module.exports={
	  entry:{
	    index:'./src/index.js'
	  },
	  output:{
	    path:__dirname + '/public',
	    filename:'./js/[name].js'
	  },
	  devServer:{
	    contentBase:'./public',
	    inline:true
	  },
	  module: {
	        rules: [
	            {
	                test: /(\.jsx|\.js)$/,
	                use: {
	                    loader: "babel-loader",
	                    options: {
	                        presets: [
	                            "es2015", "react"
	                        ]
	                    }
	                },
	                exclude: /node_modules/
	            }
	        ]
	  },
	  plugins:[
	    new HtmlWebpackPlugin({
	        template:'./src/index.html',
	        filename:'./index.html'
	    })
	  ]
	}

二.

在文件夹中打开终端，输入

npm init   （安装了nodeJS才有npm命令）

初始化项目
各个配置信息可以先不填，最后输入y，

文件夹中会自动生成一个package.json

三.

在终端中输入

npm install webpack webpack-cli -S (或-D)

/*-D(用于开发环境)和-S(用于生产环境)
具体区别:https://www.cnblogs.com/cina33blogs/p/9210931.html)*/

安装好后会自动生成node_modules

四.

npm install html-webpack-plugin -S
npm install webpack-dev-server -S
npm install babel-core babel-loader babel-preset-env babel-preset-react -S
npm install babel-polyfill -S

全都安装完后新建一个目录src，在src中创建index.js和index.html


打开package.json，
在"scripts"{}中加入

 "dev":"webpack-dev-server --open"

五.

在终端执行命令

webpack

1.若出现babel版本冲突，则执行

npm install -D babel-loader @babel/core @babel/preset-env webpack

并修改webpack.config.js配置为

  presets: [
              "@babel/env", "@babel/react"
           ]

再执行webpack命令
2.若成功执行webpack，则会自动生成一个public文件夹

六.

在终端输入

npm run dev

会成功打开浏览器并跳转到http://localhost:8080/
此时则配置成功