webpack-dev-server
废话不多说，直接上干货，下面来说说怎么使用webpack-dev-server。
方式一：
1.安装
npm install webpack-dev-server@1.16.5 --save-dev
2.如果想在终端使用webpack-dev-server,需要在全局再安装一遍
npm install -g webpack-dev-server@1.16.5
3.浏览器输入http://localhost:8080/webpack-dev-server/回车即可
上面这种方式的好处是不用配置webpack配置文件，但存在的最明显的缺陷就是随着你点击进入的文件url地址并不变，此时如果刷新就会回到首页。
方式二：
安装后配置webpack配置文件
entry: {
'common': ['./src/page/common/index.js', 'webpack-dev-server/client?http://localhost:8088/'],
'index': ['./src/page/index/index.js'],
'login': ['./src/page/login/index.js']
},
此处配置的是common，在它的后面加了webpack-dev-server/client?http://localhost:8088/，因为common是每个文件都需要的，所有所有都可以使用这个配置，配置完成后，在终端输入
webpack-dev-server --inline --port 8088
然后在浏览器输入http://localhost:8088/回车，然后点击页面上显示的文件，url地址就会改变了
到此处还没完，我们还需要配置webpack配置文件，在输出中配置publicPath，如果不配置默认为/开头，当我们审查元素时看到js和css引入的路径为：
<script type="text/javascript" src="../dist/js/index.js?19c3a308aa0f03d3fcae"></script>
<link href="../dist/css/index.css?19c3a308aa0f03d3fcae" rel="stylesheet">
而我们源码中的js和css引入的路径为：
<script type="text/javascript" src="/dist/js/index.js?19c3a308aa0f03d3fcae"></script>
<link href="/dist/css/index.css?19c3a308aa0f03d3fcae" rel="stylesheet">
相当于没找到文件。很多东西就不会生效。
配置后的内容
output: {
path: './dist',//存放文件的一个路径
publicPath: '/dist',//访问文件时的一个路径
filename: 'js/[name].js'
},
此时文件路径就对了，当我们随便修改js和css代码，页面就会实时变化。
但是上面的使用方法还是不完美，主要是因为我们在输入文件配置了'common': ['./src/page/common/index.js', 'webpack-dev-server/client?http://localhost:8088/'],这个，这个模块在线上环境也会被打包进去，但我们并不需要，它只是我们开发时用的一个工具。所以我们需要判断环境，如果生产环境就不加，开发环境就加上。此时的判断我们需要用的node.js的环境变量，来区分开发还是生产。
var WEBPACK_EVN = process.env.WEBPACK_EVN || 'dev';
然后在默认添加
if (WEBPACK_EVN == "dev"){
config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
配置完后的webpack配置文件为：
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//环境变量的配置：分为dev和online
var WEBPACK_EVN = process.env.WEBPACK_EVN || 'dev';
console.log(WEBPACK_EVN);
var getHtmlConfig = function(name){
return {
title: '干活拿钱，别无其他',
filename: 'view/' + name + '.html',
template: './src/view/' + name + '.html',
inject: true,//true默认值，script标签位于html文件的; body 底部。body同true; head script 标签位于 head 标签内; false 不插入生成的 js 文件，只是单纯的生成一个 html 文件
hash: true,
chunks: ['common', name]
};
}
var config = {
entry: {
'common': ['./src/page/common/index.js'],
'index': ['./src/page/index/index.js'],
'login': ['./src/page/login/index.js']
},
output: {
path: './dist',//存放文件的一个路径
publicPath: '/dist',//访问文件时的一个路径
filename: 'js/[name].js'
},
externals: {//可以把外部的变量或者模块加载进来
'jquery': 'window.jQuery'
},
module: {
loaders: [{
test:/\.css$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader")
},{
test:/\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=100&name=resource/[name].[ext]'
}
]
},
plugins: [
//独立通用模块
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
}),
//把css单独打包到文件里
new ExtractTextPlugin("css/[name].css"),
//html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login'))
]
};
if (WEBPACK_EVN == "dev"){
config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
module.exports = config;
但是上面这样还是有缺陷的，因为我们需要在终端输入很长的命令如WEBPACK_EVN=dev webpack-dev-server --inline --port 8088，太麻烦了，这不是我们想要的。这时我们需要配置package.json文件中的内容，这里主要配置的是scripts中的内容，配置完后
"scripts": {
"dev": "WEBPACK_EVN=dev webpack-dev-server --inline --port 8088",
//winwos环境下
"dev_windows": "set WEBPACK_EVN=dev && webpack-dev-server --inline --port 8088",
"dist": "WEBPACK_EVN=online webpack -p",先环境下环境下
//winwos环境下
"dist_windows": "set WEBPACK_EVN=online && webpack -p"
},
配置完后，我们只需要在终端输入npm run dev就可以启动webpack-dev-server了
