怎麼搭建一個webpack的微型伺服器？-js教程-PHP中文網

首頁

web前端

js教程

怎麼搭建一個webpack的微型伺服器？

零下一度

Jun 26, 2017 pm 01:36 PM

web webpack 好的我們

[前言]:因為最近在搞百度地圖API的時候用到了webpack的externals，才發現我之前都只是用webpack做一些搭建完專案後的「收尾工作」——即打包，而沒有把它納入到專案開發的「主體過程」中來，真是「物不盡其用」。於是就有了我今天的這篇學習文章：利用webpack-dev-server來建立一個webpack的伺服器

##參考資料：

webpack-dev-server的github位址：

##webpack1官方文件http://webpack.github.io/docs/webpack-dev-server.html （推薦看2的文檔）

webpack2官方文件（推薦讀這個）

# 提綱：##1.複習webpack的知識

2.詳解webpack-dev-server的配置屬性

3.webpack-dev-server的自動刷新和模組熱替換機制

4.webpack下設定伺服器的三種方式

複習webpack的知識

#我將目錄結構簡化之後長這樣：

我的webpack.config.js:

var webpack = require('webpack')var path =require('path')
module.exports = {
entry:{
   app:path.join(__dirname,'src','index.js')
},
output:{
   filename:'bundle.js',
   path:path.join(__dirname,'dist')
  }
}

登入後複製

我的src/index .js:

require('./a.js')
require('./b.js')
console.log('我是index.js')

登入後複製

#我的src/a.js:

console.log('我是a.js')

登入後複製

我的src/b.js:

console.log('我是b.js')

登入後複製

##我的dist /index.html:

/*其他部分省略*/<body>  <script src="./bundle.js?1.1.11"></script></body>

登入後複製

#當我們在終端機執行「webpack」指令後,目錄變成：

一張圖複習一下webpack的機制：

#OK，下面，讓我們開始建立一個伺服器：

怎麼用最簡單的方式搭建一個伺服器？

1.你需要一個安裝一個模組

在終端機中進入專案目錄下，敲下npm install webpack-dev-server --save-dev回車

2.在終端機執行一段指令：

node_modules/.bin/webpack-dev-server(网上有的说直接输webpack-dev-server那是错的)

成功！输出的是这一段信息：

然后进入默认的localhost:8080页面：

服务器的根目录就是我们工程的目录

到这里，我们要做的第一步就成功啦！

进入dist后，我们发现报了这样一段错误：

what?没有找到bundle.js?

所以我们要在webpack.config.js里写一下配置：

module.exports = {/*这里省略entry和output，参照上面写的内容*/   devServer: {        contentBase: path.join(__dirname, "dist")    } }
登入後複製

保存，后打开页面看控制台，报错已经消失了！正确打印了被打包的文件内容：

详解webpack-dev-server的配置属性

1.devServer.contentBase

contentBase是我们今天要讲的第一个webpack-dev-server的配置属性，那么，contentBase做了什么事情呢？——它指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。

在上面例子中产生错误和后来解决错误的原因：

产生错误：因为bundle.js被"放在了"我们的项目根目录里，在dist/html里此时显然不能根据路径找到bundle.js

解决错误：通过配置contentBase: path.join(__dirname, "dist")将bundle.js"放在了"dist目录下，此时bundle.js和dist/index.html位于同一目录下，通过 src="./bundle.js?1.1.11"自然就找到bundle.js了

webpack打包和webpack-dev-server开启服务的区别——

webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中,不输出真实的文件！（注意下面两张图的区别）

webpack:当我们在终端运行"webpack"后：

webpack-dev-server:当我们在终端运行"node_modules/.bin/webpack-dev-server后：

这也就是我在上面的阐述中将bundle.js?1.1.11"放在了"加上双引号的原因

2.devServer.port

port配置属性指定了开启服务的端口号：

devServer: {    port:7000}
登入後複製

设置端口号为7000:

运行：node_modules/.bin/webpack-dev-server

这个时候就不是默认的8080的端口了，而是我们设置的7000

3.devServer.host

host设置的是服务器的主机号：

修改配置为：

devServer: {    contentBase: path.join(__dirname, "dist"),    port:7000,    host:'0.0.0.0'}
登入後複製

此时localhost:7000和0.0.0.0:7000都能访问成功

4.devServer.historyApiFallback

在文档里面说的很清楚，这个配置属性是用来应对返回404页面时定向到特定页面用的（the index.html page will likely have to be served in place of any 404 responses)

在dist目录下新增一个HTML页面：

/*剩下的都是很常规的HTML内容，故省略*/<p>这里是404界面</p>
登入後複製

我们把webpack.config.js修改如下：

module.exports = {/*这里省略entry和output，参照上面写的内容*/devServer: { contentBase: path.join(__dirname, "dist"), historyApiFallback:{    rewrites:[       {from:/./,to:'/404.html'}    ]   } } }
登入後複製

打开页面，输入一个不存在的路由地址：

5.devServer.overlay

这个配置属性用来在编译出错的时候，在浏览器页面上显示错误，默认是false，可设置为true

首先我们人为制造一个编译错误：在我们尚未配置babel loader的项目里使用ES6写法：

在src/index.js里写入“const a”

在shell里提示编译错误：

但在浏览器里没有提示：

所以我们把webpack.config.js修改为：

module.exports = {     /*这里省略entry和output，参照上面写的内容*/    devServer: {        contentBase: path.join(__dirname, "dist"),        overlay: true    } }
登入後複製

再重新运行node_modules/.bin/webpack-dev-server，浏览器上把错误显示出来了

6.devServer.stats（字符串）

这个配置属性用来控制编译的时候shell上的输出内容，我们没有设置devServer.stats时候编译输出是这样子的：

（其中看起来有许多看似不重要的文件也被打印出来了）

stats: "errors-only"表示只打印错误：

我们把配置改成：

devServer: {    contentBase: path.join(__dirname, "dist"),    stats: "errors-only"}
登入後複製

因为只有错误才被打印，所以，大多数信息都略过了

除此之外还有"minimal"，"normal"，"verbose"，这里不多加赘述

7.devServer.quiet

当这个配置属性和devServer.stats属于同一类型的配置属性

当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告

来做个对比吧：

quiet：false（默认）：

第一次编译：

第二次编译（当你保存的时候）

quiet:true

第一次编译同上

第二次编译什么都不输出

【吐槽】这样看的话感觉这个配置好像只有负面作用呢.....

8.devServer.compress

这是一个布尔型的值，当它被设置为true的时候对所有的服务器资源采用gzip压缩

采用gzip压缩的优点和缺点：

优点：对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能

缺点：服务端要对文件进行压缩，而客户端要进行解压，增加了两边的负载

9.devServer.hot和devServer.inline

在这之前，首先要说一下的是webpack-dev-server的自动刷新和模块热替换机制

webpack-dev-server的自动刷新和模块热替换机制

这两个机制是紧紧联系在一起的

从外部角度看——自动刷新

当我们对业务代码做了一些修改然后保存后（command+s），页面会自动刷新，我们所做的修改会直接同步到页面上，而不需要我们刷新页面，或重新开启服务

（The webpack-dev-server supports multiple modes to automatically refresh the page）

从内部角度看——模块热替换

在热替换（HMR）机制里，不是重载整个页面，HMR程序会只加载被更新的那一部分模块，然后将其注入到运行中的APP中

（In Hot Module Replacement, the bundle is notified that a change happened. Rather than a full page reload, a Hot Module Replacement runtime could then load the updated modules and inject them into a running app.）

webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制

1. Iframe mode(默认,无需配置)

页面被嵌入在一个iframe里面，并且在模块变化的时候重载页面

2.inline mode（需配置）添加到bundle.js中

当刷新页面的时候，一个小型的客户端被添加到webpack.config.js的入口文件中

例如在我们的例子中，在使用inline mode的热替换后，相当于入口文件从

entry:{     app:path.join(__dirname,'src','index.js') }
登入後複製

变成了：

entry:{     app:[path.join(__dirname,'src','index.js'),             'webpack-dev-server/client?http://localhost:8080/'  ] }
登入後複製

从一个入口变成了两个入口，并实现刷新

那怎么才能inline mode模式的刷新呢？

你需要做这些：

1在配置中写入devServer.hot：true和devServer.inline：true

2增加一个插件配置webpack.HotModuleReplacementPlugin()

例如：

var webpack = require('webpack') module.exports = {   /*省略entry ,output等内容*/    plugins:[new webpack.HotModuleReplacementPlugin()     ],    devServer: {         inline:true,         hot:true} }
登入後複製

打开页面：

如果有上面两行输出则表明你已经配置成功

现在还有一个问题，那就是每次直接输入node_modules/.bin/webpack-dev-server来启动服务器对我们来说简直就是莫大的痛苦，那么怎么对这一过程进行简化呢？

答案：把这个运行脚本写到package.json里就行了！

这里我把我的package.json写成：

{   "name": "webpackTest2",   "dependencies": {},   "devDependencies": {},   "scripts": {       "start": "node_modules/.bin/webpack-dev-server" } }
登入後複製

在终端运行npm start:

运行成功！

配置服务的三种方式：

1在webpack.config.js输出对象中的devServer属性中写配置（也就是我们上述所有例子的做法）

2写在package.json中，写在node 命令对应的脚本中，例如我们可以写成：

"scripts": {

"start": "node_modules/.bin/webpack-dev-server --port 8000 --inline true "

}

(但这显然并不是一个值得推荐的方式)

3使用纯node的API实现，下面是一个官方给的例子

var config = require("./webpack.config.js?1.1.11"); config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");var compiler = webpack(config);var server = new WebpackDevServer(compiler, {       /*我们写入配置的地方*/}); server.listen(8080);
登入後複製

以上是怎麼搭建一個webpack的微型伺服器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1665

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

VUE3入門教學：使用Webpack進行打包和構建 Jun 15, 2023 pm 06:17 PM

Vue是一款優秀的JavaScript框架，它可以幫助我們快速建立互動性強、高效性好的Web應用程式。 Vue3是Vue的最新版本，它引入了許多新的功能和功能。 Webpack是目前最受歡迎的JavaScript模組打包器和建置工具之一，它可以幫助我們管理專案中的各種資源。本文就為大家介紹如何使用Webpack打包和建構Vue3應用程式。 1.安裝Webpack

Web 端即時防擋臉彈幕（基於機器學習） Jun 10, 2023 pm 01:03 PM

防擋臉彈幕，即大量彈幕飄過，但不會遮擋視訊畫面中的人物，看起來像是從人物背後飄過去的。機器學習已經火了好幾年了，但很多人都不知道瀏覽器中也能運行這些能力；本文介紹在視頻彈幕方面的實踐優化過程，文末列舉了一些本方案可適用的場景，期望能開啟一些腦洞。 mediapipeDemo（https://google.github.io/mediapipe/）展示主流防擋臉彈幕實現原理點播up上傳視訊伺服器後台計算提取視訊畫面中的人像區域，轉換成svg儲存用戶端播放視訊的同時，從伺服器下載svg與彈幕合成，人像

Java API 開發中使用 Jetty7 進行 Web 伺服器處理 Jun 18, 2023 am 10:42 AM

JavaAPI開發中使用Jetty7進行Web伺服器處理隨著互聯網的發展，Web伺服器已經成為了應用程式開發的核心部分，同時也是許多企業所關注的焦點。為了滿足日益增長的業務需求，許多開發人員選擇使用Jetty進行Web伺服器開發，其靈活性和可擴展性受到了廣泛的認可。本文將介紹如何在JavaAPI開發中使用Jetty7進行We

如何使用Golang實作網頁應用程式的表單驗證 Jun 24, 2023 am 09:08 AM

表單驗證是Web應用程式開發中非常重要的環節，它能夠在提交表單資料之前對資料進行有效性檢查，避免應用程式出現安全漏洞和資料錯誤。使用Golang可以輕鬆實現網頁應用程式的表單驗證，本文將介紹如何使用Golang來實作網頁應用程式的表單驗證。一、表單驗證的基本要素在介紹如何實作表單驗證之前，我們需要知道表單驗證的基本要素是什麼。表單元素：表單元素是指

web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南，它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化，透過遵循這些標準，可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互，提供更好的使用者體驗和開發效率。

如何從駕駛艙Web使用者介面啟用管理訪問 Mar 20, 2024 pm 06:56 PM

Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中，我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題：駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式：受限訪問：這是駕駛艙的默認訪問模式。在這種存取模式下，您無法從駕駛艙Web用戶

web是什麼意思 Jan 09, 2024 pm 04:50 PM

web是全球廣域網，也稱為萬維網，是互聯網的一種應用形式。 Web 是一種基於超文本和超媒體的資訊系統，它允許使用者透過超連結在不同的網頁之間跳轉，從而瀏覽和獲取資訊。 Web 的基礎是互聯網，它使用統一、標準化的協定和語言，使得不同電腦之間能夠進行資料交換和資訊共享。

使用Spring Boot和Webpack建構前端工程和插件系統 Jun 22, 2023 am 09:13 AM

隨著現代Web應用程式的複雜性不斷增加，建立優秀的前端工程和插件系統變得越來越重要。隨著SpringBoot和Webpack的流行，它們成為了一個建構前端工程和插件系統的完美組合。 SpringBoot是一個Java框架，它以最小的配置需求來建立Java應用程式。它提供了許多有用的功能，例如自動配置，使開發人員可以更快、更輕鬆地建立和部署Web應用程式。 W

See all articles

怎麼搭建一個webpack的微型伺服器？

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題