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

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

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

 

通过本文的阅读你可以学到

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

 

一、安装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

 

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

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

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

 

 

 

 

参考资料

1.神器のwebpack-dev-server