webpack 搭建自动打开，刷新浏览器；

目录结构

1. se6： 项目文件名；
2. build： 打包后保存文件；
3. src： 项目源代码；
4. index.html： 运行时默认打开的页面（你也可以自行设置）
5. package.json： 指定你项目中的node模块；

6. wbpack.config.js： wbpack的配置文件

   在src文件夹下创建一个index.js文件, 这个文件就是我们的入口文件，也就是启动webpack时，webpack去访问的文件，

创建webpack.config.js文件，这个文件是运行webpack时，webpack默认运行的文件，

安装cnpm

命令
cnpm install

安装包的信息要保持到项目的package.json文件中，以便后续的其它的项目开发或者他人合作使用，package.json在项目中是必不可少的

cnpm init

webpack.config.js文件配置

const path = require('path');//node.js的 path API 路径API  
module.exports = {
    context: path.resolve(__dirname, 'src'),
    //context 基础目录，必须是绝对路径；path.resolve 解析为绝对路径 参数：————dirname 目录名，我们这里的入口文件是src/index.js，所以这里写src，path.resolve已经把目录解析为绝对路径所以不用写/src

    entry: './index.js',
    //entry：入口文件，因为我们上面已经指定了基础的目录Context（/src），所以我们这里只需要写./index.js

    output: {
        filename: 'build.js',
        //输出的文件名

        path: path.resolve(__dirname, 'build'),
        //输出的文件地址，必须是绝对路径

        publicPath: '/'     
        //该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以/结束。例如这里的，运行后的文件地址是/build，如果你写成http://www.xx.com,运行后实际的地址是 http://www.xx.com/build  我们可以使用它解决一些图片等静态资源的路径问题，默认值是一个空字符串 ""。
    },
    module: {
    //注意这里。webpack2.5将这里的laoders替换为了rules，你可以理解为模块的规程
        rules: [
        //rules是一个数组，每一个loader都是一个对象
            {
                test: /\.js?$/,//正常匹配
                exclude: '/node_modules', // 排除，例如编译时我们并不需要编译node_modules文件下的.js文件

                use: [{loader:'babel-loader'}]
                //这是webpack2.5新的写法 
            }
        ]
    }
}

publicPath 官方文档
Module 官方文档

插件以及模块

es6的编译器：babel 官方文档
建议阅读，ES6有的语法需要安装babel的插件来使浏览器可以允许

安装命令 
npm install --save-dev babel-loader babel-core babel-preset-env webpack

webpack-dev-server
官方说明

概念：
WebPack-dev-server是一个小的Node.js 快递服务器，它使用的WebPack-DEV-中间件以服务的WebPack束。它还有一个运行时通过Sock.js连接到服务器。
服务器向客户端发送有关编译状态的信息，从而对这些事件做出反应。您可以根据需要选择不同的模式。

webpack-dev-server是一个独立的npm，如果你要使用它，就需要安装它

安装命令 
cnpm install webpack-dev-server --save-dev 

运行命令
webpack-dev-server

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式。
在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载；

在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面。

iframe模式无需配置；你只需要在浏览器中打开
http://localhost:8080/webpack-dev-server/index.html\

inline模式需要你在CLI 加上

--inline

在开发者服务器的两种不同模式之间切换。默认情况下，应用程序将启用内联模式。这意味着一个脚本将被插入到你的包中以保证实时重新加载，并且构建消息将出现在浏览器控制台中。

更多配置

注意
在开始前，确定你有一个 index.html 文件指向你的 bundle。假设 output.filename 是 build.js

<script src="/build.js">script>

这里引用的不是打包后的文件地址，因为实时编译的时候，加载的是内存中的文件，这就意味着你在项目的打包路径中是无法看到打包文件。如果需要发布打包，你需要运行

webpack --config webpack.config.js 

自动打开浏览器
open-browser-webpack-plugin
官方文档

首先安装

安装命令 
cnpm install bower-webpack-plugin --save-dev

它的配置也很简单

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

  plugins: [
        new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ]

最后我们方便运行webpack 使用 npm来启动webapk-dev-server
在package.json文件中
输入以下代码；他的意思是，cnpm run start 时，运行 webpack-dev-server –inline, 内联模式

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js --colors",
    "start": "webpack-dev-server --inline"
  },

webpack.config.js完整配置：

const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: '/node_modules',
                use: [{loader:'babel-loader'}]
            }
        ]
    },
    plugins: [
        new OpenBrowserPlugin({})
    ]
}

cnpm run start 开发你的项目吧