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

目录结构

se6： 项目文件名；

build： 打包后保存文件；

src： 项目源代码；

index.html： 运行时默认打开的页面（你也可以自行设置）

package.json： 指定你项目中的node模块；

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 开发你的项目吧