从0到上线开发企业级电商项目_前端_12_神器webpack-dev-server

在以前的文章中咱们已经成功的配置了webpack对脚本、样式、HTML、图片、字体的处理，

本文将详细介绍webpack神器，webpack-dev-server的配置。

 

经过本文的阅读你能够学到

• webpack-dev-server的安装
• webpack-dev-server的热更新
• 关闭正在运行的端口
• webpack-dev-server高级配置

 

1、安装webpack-dev-server

 

npm install webpack-dev-server –save-dev

若是使用的webpack是低于2.2.0的版本则会安装失败，

能够经过安装低版本的webpack-dev-server来解决这个问题。能够进入到webpack-dev-server的github中找。

 

npm install webpack-dev-server@1.16.5 --save-dev

安装速度较慢耐心等待。

如今在命令行执行webpack-dev-server的话会报错，由于若是使用命令行来执行的话须要全局安装一下。

 

npm install webpack-dev-server@1.16.5 -g

 

 如今执行webpack-dev-server 可能会执行成功，可是也有可能没有执行成功如图，最可能的缘由是8080端口被占用了。不过没有关系先把这个问题放在一边咱们继续进行配置，咱们后面对于端口进行更改就能够了。

若是执行成功的话咱们经过浏览器进入http://localhost:8080/webpack-dev-server能够看到一个界面，显示的是咱们项目的文件夹和文件。这个页面的额布局是webpack-dev-server默认的iframe方式，这个方式很差的地方是：

1. url地址不会变化
2. 页头会给样式的调试带来不方便

所以咱们须要将其切换成另外一种方式。接下来咱们更改配置文件。在webpack.config.js中的common加上client，即“webpack-dev-server/client?http://localhost:8123”因为是本文提一次使用webpack.config.js，所以我把全部代码都放上来，如何一步步配制成目前这样的请参考我以前的文章。

var webpack = require(‘webpack’);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(‘html - webpack - plugin’);
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name) {
    return {
        template: ‘. / src / view / ’ + name + ‘.html’,
        filename: ‘view / ’ + name + ‘.html’,
        inject: true,
        hash: true,
        chunks: [‘common’, name]
    }
}
//webpack config
var config = {
    entry: {‘common’: [‘. / src / page / common / index.js’, ’webpack - dev - server / client ? http: //localhost:8123/’],
        ‘index’: [‘. / src / page / index / index.js’], ‘login’: [‘. / src / page / login / index.js’],
    },
    output: {
        path: ‘. / 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: [
    //独立通用模块到js/base.js
    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’)), ]
};
module.exports = config;

 

从代码中咱们能够看到咱们指定了端口号的8123，

这个时候咱们要使用8123的端口的话须要在命令行中指定端口来执行webpack-dev-server

webpack-dev-server –inline –port 8123

 

若是是以前没有执行成功的话，在配置了以后执行这条指定端口号的命令行应该就能够执行成功了。

用浏览器打开这个路径。能够看到已经少了页头方便咱们调试样式。若是这个时候仍是不可以打开页面可能这个端口也被占用了（笔者就是808八、8080和8123都被占用了），这里提供一个关闭占用端口的方法。没有问题能够直接跳过这一部分。

• 如何关闭被占用的端口？

 

 

 

 

参考资料

1.神器のwebpack-dev-server