詳解webpack-dev-server的使用

時間 2019-11-06

標籤詳解 webpack dev server 使用简体版

原文原文鏈接

webpack-dev-server

webpack-dev-server是一個小型的Node.js Express服務器,它使用webpack-dev-middleware來服務於webpack的包,除此自外，它還有一個經過Sock.js來鏈接到服務器的微型運行時.javascript

咱們來看一下下面的配置文件(webpack.config.js)html

var path = require("path");
module.exports = {
    entry:{
    app:["./app/main.js"]
    },
    output:{
    path:path.resolve(__dirname,"build"),
    publicPath:"/assets/",
    filename:"bundle.js"
}
}

這裏你將你的源文件放在app文件夾下,並經過webpack將其打包到build文件夾下的bundle.js中.html5

注意:webpack-dev-server是一個獨立的NPM包,你能夠經過npm install webpack-dev-server來安裝它.java

基本目錄

webpack-dev-server默認會以當前目錄爲基本目錄,除非你制定它.webpack

webpack-dev-server --content-base build/

上述命令是在命令行中執行的,它將build目錄做爲根目錄.有一點須要注意的是:webpack-dev-server生成的包並無放在你的真實目錄中,而是放在了內存中.git

咱們在基本目錄下新建一個index.html文件,而後在瀏覽器中輸入http://localhost:8080訪問.github

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="assets/bundle.js"></script>
</body>
</html>

自動刷新

webpack-dev-server支持兩種模式來自動刷新頁面.web

iframe模式(頁面放在iframe中,當發生改變時重載)express
inline模式(將webpack-dev-sever的客戶端入口添加到包(bundle)中)npm

兩種模式都支持熱模塊替換(Hot Module Replacement).熱模塊替換的好處是隻替換更新的部分,而不是頁面重載.

iframe模式

使用這種模式不須要額外的配置,只須要如下面這種URL格式訪問便可

http://«host»:«port»/webpack-dev-server/«path»

例如:http://localhost:8080/webpack...

inline模式

inline模式下咱們訪問的URL不用發生變化,啓用這種模式分兩種狀況:

1 當以命令行啓動webpack-dev-server時,須要作兩點：

在命令行中添加--inline命令
在webpack.config.js中添加devServer:{inline:true}

2 當以Node.js API啓動webpack-dev-server時,咱們也須要作兩點:

因爲webpack-dev-server的配置中無inline選項,咱們須要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口點中.
將<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中

var config = require("./webpack.config.js");
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    contentBase:'build/',
    publicPath: "/assets/"
});
server.listen(8080);

在Node中運行上面的代碼便可。

注意：webpack配置中的devSever配置項只對在命令行模式有效。

(Hot Module Replacement)熱模塊替換

在命令行中運行inline模式，並啓用熱模塊替換

這裏只須要多增長 --hot指令就OK了.以下所示.

webpack-dev-server --content-base build --inline --hot

注意:命令行模式下,webpack.config.js中必定要配置output.publicPath來指定編譯後的包(bundle)的訪問位置.

在Nodejs API中運行inline模式，並啓用熱模塊替換

這裏須要作如下三點:

在webpack.config.js的entry選項中添加:webpack/hot/dev-server
在webpack.config.js的plugins選項中添加:new webpack.HotModuleReplacementPlugin()
在webpack-dev-server的配置中添加：hot:true

webpack-dev-server中的配置選項

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

var compiler = webpack({
  // configuration
});
var server = new WebpackDevServer(compiler, {
  // webpack-dev-server options

  contentBase: "/path/to/directory",
  // Can also be an array, or: contentBase: "http://localhost/",

  hot: true,
  // Enable special support for Hot Module Replacement
  // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
  // Use "webpack/hot/dev-server" as additional module in your entry point
  // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

  // Set this as true if you want to access dev server from arbitrary url.
  // This is handy if you are using a html5 router.
  historyApiFallback: false,

  // Set this if you want to enable gzip compression for assets
  compress: true,

  // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
  // Use "**" to proxy all paths to the specified server.
  // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
  // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
  proxy: {
    "**": "http://localhost:9090"
  },

  setup: function(app) {
    // Here you can access the Express app object and add your own custom middleware to it.
    // For example, to define custom handlers for some paths:
    // app.get('/some/path', function(req, res) {
    //   res.json({ custom: 'response' });
    // });
  },

  // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
  staticOptions: {
  },

  // webpack-dev-middleware options
  quiet: false,
  noInfo: false,
  lazy: true,
  filename: "bundle.js",
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  // It's a required option.
  publicPath: "/assets/",
  headers: { "X-Custom-Header": "yes" },
  stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();

參考:http://webpack.github.io/docs...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。