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了