webpack-dev-server開啟服務監測js、HTML、CSS並自動重新整理網頁的套路詳細步驟並附程式碼

阿新 • • 發佈：2019-01-12

在一個合適的資料夾下npm初始化

npm init

安裝webpack

cnpm install webpack --save-dev

建立webpack.config.js檔案，也可以滑鼠右鍵建立（下同，省略）。

touch webpack.config.js

建立一個app資料夾

mkdir app

在app資料夾中建立一個main.js的檔案和一個index.html檔案

cd app                      // 進入新建立的app資料夾
touch main.js
touch index.html
cd ..                       // 退出app資料夾，到上一層

在main.js中隨便寫點什麼，比如

var app = document.getElementById("app");
app.innerHTML = "This is an example";

在index.html中隨便寫點什麼，其中id要與上面的程式碼對應

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is an example</title>
    </head>
    <body 
>
        <div class="">
            <p id="app"></p>
        </div>
        <script type="text/javascript" src="../build/bundle.js"></script>
    </body>
</html>

在webpack.config.js檔案中加入如下程式碼，其中其中publicPath是後面配置webpack.dev.server的時候用的。

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

執行以下webpack，先編譯下試試，因為只是區域性安裝，所以執行的時候要這樣

node_modules/.bin/webpack

執行完之後就可以在terminal中看到執行的結果，工作目錄中也會自動建立了一個build的資料夾，裡面有一個bundle.js的檔案，這些都是在上面webpack.config.js裡面配置的結果。

瀏覽器開啟index.html看看

先進入app資料夾

cd app

開啟index.html的三種方法

open index.html                                      // 預設瀏覽器開啟
open -a /Applications/Google\ Chrome.app index.html  // chrome開啟，前提是你的chrome放在了Applications裡面
open -a "Google Chrome" index.html                   //你也不知道chrome在哪，就用這個

安裝webpack-dev-server，下面cd的命令就不寫了

cd ..                       // 因為上一步進入app檔案夾了，所以要退出來
npm install webpack-dev-server --save-dev

把index中的../build/bundle.js改成/assets/bundle.js這個與上面設定的publicPath有關。如果沒有publicPath，那這個路徑就直接寫成bundle.js

在命令列輸入

node_modules/.bin/webpack-dev-server --content-base app/

運行了之後命令列會提示埠的號碼，這個時候這個命令列在啟動服務，在想用命令列開啟瀏覽器就不方便了，所以手動到瀏覽器輸入localhost:8080/index.html；

另一種iframe模式的操作的區別只在輸入的網址：localhost:8080/webpack-dev-server/index.html

以上兩種開啟網頁的方式選用一種即可。

這個時候要注意的是，生成的bundle.js檔案在記憶體中，我們是看不到的。

以後還沒多次的使用開啟服務的命令，總是這樣輸入大串的命令實在不合適，所以，到npm初始化時候建立的package.json裡面的scripts中加一行代用的命令

"dev": "webpack-dev-server --content-base app/"

再執行的時候就這樣

npm run dev

運行了服務並打開了網頁之後，再改動main.js檔案，瀏覽器就可以自動重新整理了。

自動重新整理HTML

安裝HtmlWebpackPlugin外掛，這裡要說一下，這個外掛並不是用來重新整理HTML的，而是用來一塊打包HTML檔案的，真正用來打包的時候的配置並不是這樣的。

npm install --save-dev html-webpack-plugin

在webpack.dev.server中新增配置

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 新增在這裡
module.exports = {
  entry: {
    app: ["./app/main.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  plugins: [new HtmlWebpackPlugin({                 //新增在這裡
    template: path.resolve(__dirname, 'app/index.html'),
    filename: 'index.html',
    inject: 'body'
  })]
};

執行一下，改動html就可以自動重新整理了。

自動重新整理css

安裝style-loader和css-loader

npm install --save-dev style-loader css-loader

在main.js中引入style.css，由於main.js上面指定的配置中的入口，所以不再main.js中引入style.css的話，webpack是找不到這個檔案的。

import './style.css';

在webpack.dev.server中新增配置，新增在output下面，plugins上面。

  module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
      ]
  },

建立一個css，隨便寫點什麼

p {
    background-color: blue;
}

在次再執行，修改css就可以自動重新整理了。

原始碼下載：https://github.com/zhuanyongxigua/routine

webpack-dev-server開啟服務監測js、HTML、CSS並自動重新整理網頁的套路詳細步驟並附程式碼

在一個合適的資料夾下npm初始化npm init 安裝webpackcnpm install webpack --save-dev 建立webpack.config.js檔案，也可以滑鼠右鍵建立（下同，省略）。touch webpack.config.js 建立一個app資料夾mkdir app 在app資料

webpack.config.js====webpack-dev-server開發服務器配置

span pen config 默認瀏覽器 class webpack style pre div 1. 安裝webpack-dev-server cnpm install webpack-dev-server --save-dev 2. 配置 //開發服務器

前端構架配置（二）node.js、 webpack、css-loader、html-loader、style-loader、webpack-dev-server等外掛安裝總出錯解決方式

眾所周知，如果我們需要用到webpack打包，則需要做很多準備工作，包括node.js的安裝，webpack等的安裝。這個安裝過程總會出現各種安裝不成功的情況。這裡不細說各種情況，直接給出一個最通用的解決方案。方案如下：核心是配套好各個外掛的版本號，如

webpack-dev-server.js:405 throw e;

一開始裝webpack建議先裝低一點版本，所以npm i -D [email protected] 裝了個3.12版本的,然後裝了webpack-dev-server 配置如下： { "name": "WebPack", "version": "1.0.0", "descr

vue.js 配置webpack-dev-server 的錯誤解決方法

解決如下：源webpack.config.js中如下： devServer: { historyApiFallback: true, hot: true,

vue開啟專案npm run dev 後報錯'webpack-dev-server'

啊啊啊啊啊。我想在這裡傳上來一張報錯的圖，怎麼瀏覽器就卡的會轉圈，圖片不讓傳呢？好氣哦[○･｀Д´･ ○]，怎麼感覺csdn改的不怎好用了，看到這知道的小夥伴知道的可以告訴我一下哈，在此先謝過了。Thanks♪(･ω･)ﾉ好了，說正事。報錯顯

webpack-dev-server啟動失敗

target href -s 失敗 http ima pack pac html 學習webpack-dev-server過程中，項目路徑下執行webpack-dev-server，老是報錯，原來是配置項在colors在webpack2.0以上版本不需要進行配置了，

webpack基礎+webpack配置文件常用配置項介紹+webpack-dev-server

建議每次 alt fig out 添加 pre 補充字符串一.webpack基礎　　1.在項目中生成package.json：在項目根目錄中輸入npm init，根據提示輸入相應信息。（也可以不生成package.json文件，但是package.json是很有用的

用webpack-dev-server開發時代理，決解開發時跨域問題

端口 dex lba save progress 重要 less span npm 一、設置代理的原因現在對前端開發的要求越來越高，並且隨著自動化以及模塊化的誕生，前後端開發模式越來越流行。後端只負責接口，前端負責數據展示、邏輯處理。但是前後端開發模式，有一個重要的問題

webpack-dev-server 無法通過ip訪問

color -s onf gre ogr uil class 生成 pts 使用Vue-cli生成的webpack腳手架，之前一直是可以通過本地ip + 端口來訪問的。今天忽然不可以，百度一下才知道缺少了host參數。打開package.json。在.scripts.de

'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序

解決 dev bsp blog log 再次裝包全局 pac 今天新初始的項目遇到這個問題，記錄如下： 1. 這個錯誤與全局安裝webpack-dev-server無關，不必進行全局安裝 2. 原因可能是：　 npm或yarn安裝包(當前項目)，安裝中報錯，例如nod

[轉] webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin

war () 最新版本獲取報錯 key num clas 容易 devtool devtool是webpack中config自帶的屬性只要使用就可以了不用安裝 webpack官網的解釋如下當 webpack 打包源代碼時，可能會很難追蹤到錯誤和警告在源代碼中的原始位

webpack-dev-server配置指南webpack3.0

tput image led 替換 conf 朋友 div bundle 不知道最近正在研究webpack，聽說webpack可以自己搭建一個小型的服務器（使用過vue-cli的朋友應該都見識到過），所以迫不及待的想要嘗試一下。不過，在實際操作中發現，用webpack搭建

Vue 項目： npm run dev b報錯 “'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序或批處理文件。”

output 安裝 modules RR module -i progress his dev 前提：電腦已經安裝了nodeJS和npm, 項目是直接下載的zip包。報錯步驟為1：cd /d 目錄； 2. npm ren dev -------> 報錯如下：

Vue項目碰到"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序或批處理文件"報錯

node fill sta 新建 sso 用戶權限環境 fonts IT 最近公司裏做vue項目，svn了前端同事的項目代碼，裝好環境，運行項目（安裝步驟隨便百度一下，很詳細），控制臺裏報錯“‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序或

webpack-dev-server 小記原理介紹概念解讀

style 事情可能 asc 監聽文件地址 dev ces 內容使用 DevServer 提供 HTTP 服務而不是使用本地文件預覽監聽文件的變化並自動刷新網頁，做到實時預覽支持 Source Map，以方便調試　　對於這些，Webpack 都為我們考慮好了。W

webpack之webpack-dev-server的使用

config bubuko ima 百度一進入自動打開 pda 監聽電腦本文的目的是要體驗下使用webpack服務器的熱更新和構建完成自動彈出瀏覽器的酷炫效果。 1、webpack及webpack-dev-server的安裝全局安裝webpack，使用命令npm

關於webpack-dev-server不能及時更新的問題

tput output style 關於腳本 class 不能更新瀏覽器問題描述：配置好了webpack-dev-server之後，修改文件，發現它可以重新編譯，但是瀏覽器頁面並沒有自動更新。比如我在腳本裏新添了一句alert(1234), 雖然webpack-

vue中"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序"的報錯

ext watermark 描述 https 文件程序 pac 解決辦法 ins 在vue項目中發現了這個報錯解決辦法將項目裏的“node_modules”文件夾刪除，然後重新運行cnpm installvue中"‘webpack-d

webpack4 系列教程(十五)：開發模式與webpack-dev-server

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十五)：開發模式與 webpack-dev-server》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ♪(^∇^*) 0. 課程介紹和資料 &g

webpack-dev-server開啟服務監測js、HTML、CSS並自動重新整理網頁的套路詳細步驟並附程式碼

自動重新整理HTML

自動重新整理css

相關推薦