webpack4 系列教程(十四)：Clean Plugin and Watch Mode

TalkingData 發布于2019-08-23 12:27 / 2383人閱讀

摘要：作者按因為教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步系列教程十四原文地址。需要注意的是應該把放在配置項的最后一個，因為配置是倒序的最后配置的最先執行。以保證每次正式打包前，先清空原來遺留的打包文件。

作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ?(^?^*)

0. 課程介紹和資料

>>>本節課源碼

>>>所有課程源碼

本節課的代碼目錄如下：

本節課用的 plugin 和 loader 的配置文件package.json如下：

{
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.1"
  }
}

1. 什么是Clean Plugin和Watch Mode？

在實際開發中，由于需求變化，會經常改動代碼，然后用 webpack 進行打包發布。由于改動過多，我們/dist/目錄中會有很多版本的代碼堆積在一起，亂七八糟。

為了讓打包目錄更簡潔，這時候需要Clean Plugin，在每次打包前，自動清理/dist/目錄下的文件。

除此之外，借助 webpack 命令本身的命令參數，可以開啟Watch Mode：監察你的所有文件,任一文件有所變動,它就會立刻重新自動打包。

2. 編寫入口文件和 js 腳本

入口文件app.js代碼：

console.log("This is entry js");

// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));

// CommonJs
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));

// AMD
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});

vendor/sum.js:

export default function(a, b) {
  return a + b;
}

vendor/multi.js:

define(function(require, factory) {
  "use strict";
  return function(a, b) {
    return a * b;
  };
});

vendor/minus.js:

module.exports = function(a, b) {
  return a - b;
};

3. 編寫 webpack 配置文件

CleanWebpackPlugin參數傳入數組，其中每個元素是每次需要清空的文件目錄。

需要注意的是：應該把CleanWebpackPlugin放在plugin配置項的最后一個，因為 webpack 配置是倒序的（最后配置的最先執行）。以保證每次正式打包前，先清空原來遺留的打包文件。

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // js引用路徑或者CDN地址
    path: path.resolve(__dirname, "dist"), // 打包文件的輸出目錄
    filename: "[name]-[hash:5].bundle.js",
    chunkFilename: "[name]-[hash:5].chunk.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["app"]
    }),
    new CleanWebpackPlugin(["dist"])
  ]
};

執行webpack打包，在控制臺會首先輸出一段關于相關文件夾已經清空的的提示，如下圖所示：

4. 開啟Watch Mode

直接在webpack命令后加上--watch參數即可：webpack --watch。

控制臺會提示用戶“開啟 watch”。我改動了一次文件，改動被 webpack 偵聽到，就會自動重新打包。如下圖所示：

如果想看到詳細的打包過程，可以使用：webpack -w --progress --display-reasons --color。控制臺就會以花花綠綠的形式展示出打包過程，看起來比較酷炫：

GPU云服務器云服務器 webpack4教程 linux系列教程云服務器建站教程系列 webpack4

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98556.html

webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack4 系列教程: 前言

摘要：課程地址全部課程地址立即進入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言本文檔已經過時，最近內容請看：https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發者可以輕松地實現加密代碼、多平臺兼容。而最重要的...

DevWiki 2019-08-23 10:25 評論0 收藏0
webpack4系列教程（三）：自動生成項目中的HTML文件

摘要：自動生成項目中的文件在前文中我們為了演示打包好的，在根目錄下創建了一個，并引入。至此，我們已經成功實現自動生成項目中的文件了。執行，在命令行中可見文件夾已被刪除了。 1. webpack中的CommonJS和ES Mudule 規范 1.1 CommonJs規范 CommonJs規范的出發點：JS沒有模塊系統、標準庫較少、缺乏包管理工具；為了讓JS可以在任何地方運行，以達到Java、P...

kgbook 2019-08-23 14:41 評論0 收藏0
從基礎到實戰手摸手帶你掌握新版Webpack4.0詳解一起讀文檔

摘要：構建構建就是把源代碼轉換成發布到線上的可執行代碼，包括如下內容。自動刷新監聽本地源代碼的變化，自動重新構建刷新瀏覽器。自動發布更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。將文件放入到項目中，在中新建一個放字體圖標的文件夾。項目地址 github.com/wudiufo/Web… 知識點概覽： Loader，HMR ,Create React App, Caching, Plug...

王軍 2019-05-23 17:31 評論0 收藏0
webpack4 系列教程(十五)：開發模式與webpack-dev-server

摘要：作者按因為教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步系列教程十五開發模式與原文地址。而開發模式就是指定為。在非開發模式下，需要關閉此選項，以減小打包體積。在單頁應用中，任何響應直接被替代為。作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十五)：開發模式與 webpack-dev-server》原文地址。更歡迎來我的...

zengdongbao 2019-08-23 12:27 評論0 收藏0