從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