webpack搭建服務器，隨時修改刷新

時間 2019-11-12

標籤 webpack 搭建服務器隨時修改刷新简体版

原文原文鏈接

前提：一、對webpack有必定了解，本文不作介紹javascript

　　　二、安裝node.jshtml

手把手操做：java

一、建立一個名爲webpack-server的文件夾（隨便取的）node

二、cd到當前文件夾：cd webpack-server，有個快捷方法，打開文件夾，按住shift鍵，點鼠標右鍵，選擇在「在此處打開命令窗口(w)」webpack

三、打開命令行後，輸入npm init 命令建立package.json文件web

接下來一步一步填，一直enter不填直接跳過也行npm

yes後就會生成一個package.json文件。json

{
  "name": "webpack-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

四、在webpack-server文件夾下建立app文件夾，並在該文件夾下面建立index.html和main.js，同時建立一個webpack打包的配置文件webpack.config.jsapi

此時文件目錄以下：瀏覽器

三個文件代碼是這樣的

index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

main.js

document.write('<h1>Hello World!!!</h1>');

webpack.config.js

module.exports = {
  devtool: 'eval-source-map',
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

以上是一些打包的簡單代碼，在頁面中輸出Hello World!!!

五、安裝webpack，做爲依賴包。

指令：npm install --save-dev webpack

（提示：安裝淘寶鏡像會更快下載，方法見連接https://npm.taobao.org/，安裝了以後，指令就是cnpm install --save-dev webpack）

安裝完成，webpack-server會生成一個node_modules的文件夾，同時，package.json依賴包增長webpack

六、安裝webpack-dev-server，指令：npm install --save-dev webpack-dev-server，（淘寶鏡像下是cnpm install --save-dev webpack-dev-server）

安裝完後又多了一個依賴包

七、安裝完後就能夠關掉該命令行窗口了，而後進入app文件夾，在app文件夾下面打開命令行窗口，並執行webpack-dev-server命令

ok，看到這就表示成功了，你就能夠打開http://localhost:8080/打開頁面了。（注：默認爲8080端口，能夠修改的）

八、簡單修改下代碼：

畫面自動變成：

——————————————————————————————分割線————————————————————————————————

webpack-dev-server有如下可選參數：

--content-base //設定webpack-dev-server的director根目錄。若是不進行設定的話，默認是在當前目錄下。
--quiet: //控制檯中不輸出打包的信息，開發中通常設置爲false，進行打印，這樣查看錯誤比較方面
--no-info: // 不顯示任何信息
--colors: //對信息進行顏色輸出
--no-colors: //對信息不進行顏色輸出
--compress: //開啓gzip壓縮
--host <hostname/ip>: //設置ip
--port <number>: //設置端口號，默認是:8080
--inline: //webpack-dev-server會在你的webpack.config.js的入口配置文件中再添加一個入口,
--hot: //開發熱替換
--open: //啓動命令，自動打開瀏覽器
--history-api-fallback: //查看歷史url

上面的參數都是可選的，舉個改變端口的例子：

指令：webpack-dev-server --port 8088

顯示出來的是：

以上就是我所分享的內容，純屬原創，歡迎閱讀與轉載，請註明出處！