国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

TalkingData / 2391人閱讀

摘要：作者按因?yàn)榻坛趟緢D片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步系列教程十四原文地址。需要注意的是應(yīng)該把放在配置項(xiàng)的最后一個(gè)，因?yàn)榕渲檬堑剐虻淖詈笈渲玫淖钕葓?zhí)行。以保證每次正式打包前，先清空原來(lái)遺留的打包文件。

作者按：因?yàn)榻坛趟緢D片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址。更歡迎來(lái)我的小站看更多原創(chuàng)內(nèi)容：godbmw.com，進(jìn)行“姿勢(shì)”交流 ?(^?^*)
0. 課程介紹和資料

>>>本節(jié)課源碼

>>>所有課程源碼

本節(jié)課的代碼目錄如下：

本節(jié)課用的 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？

在實(shí)際開發(fā)中，由于需求變化，會(huì)經(jīng)常改動(dòng)代碼，然后用 webpack 進(jìn)行打包發(fā)布。由于改動(dòng)過(guò)多，我們/dist/目錄中會(huì)有很多版本的代碼堆積在一起，亂七八糟。

為了讓打包目錄更簡(jiǎn)潔，這時(shí)候需要Clean Plugin，在每次打包前，自動(dòng)清理/dist/目錄下的文件。

除此之外，借助 webpack 命令本身的命令參數(shù)，可以開啟Watch Mode：監(jiān)察你的所有文件,任一文件有所變動(dòng),它就會(huì)立刻重新自動(dòng)打包。

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參數(shù)傳入數(shù)組，其中每個(gè)元素是每次需要清空的文件目錄。

需要注意的是：應(yīng)該把CleanWebpackPlugin放在plugin配置項(xiàng)的最后一個(gè)，因?yàn)?webpack 配置是倒序的（最后配置的最先執(zhí)行）。以保證每次正式打包前，先清空原來(lái)遺留的打包文件。

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"])
  ]
};

執(zhí)行webpack打包，在控制臺(tái)會(huì)首先輸出一段關(guān)于相關(guān)文件夾已經(jīng)清空的的提示，如下圖所示：

4. 開啟Watch Mode

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

控制臺(tái)會(huì)提示用戶“開啟 watch”。我改動(dòng)了一次文件，改動(dòng)被 webpack 偵聽到，就會(huì)自動(dòng)重新打包。如下圖所示：

如果想看到詳細(xì)的打包過(guò)程，可以使用：webpack -w --progress --display-reasons --color?？刂婆_(tái)就會(huì)以花花綠綠的形式展示出打包過(guò)程，看起來(lái)比較酷炫：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98556.html

相關(guān)文章

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

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

    LMou 評(píng)論0 收藏0

  • webpack4 系列教程: 前言

    摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識(shí)點(diǎn)，目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過(guò)時(shí)，最近內(nèi)容請(qǐng)看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...

    DevWiki 評(píng)論0 收藏0

  • webpack4系列教程（三）：自動(dòng)生成項(xiàng)目中的HTML文件

    摘要：自動(dòng)生成項(xiàng)目中的文件在前文中我們?yōu)榱搜菔敬虬玫模诟夸浵聞?chuàng)建了一個(gè)，并引入。至此，我們已經(jīng)成功實(shí)現(xiàn)自動(dòng)生成項(xiàng)目中的文件了。執(zhí)行，在命令行中可見文件夾已被刪除了。 1. webpack中的CommonJS和ES Mudule 規(guī)范 1.1 CommonJs規(guī)范 CommonJs規(guī)范的出發(fā)點(diǎn)：JS沒有模塊系統(tǒng)、標(biāo)準(zhǔn)庫(kù)較少、缺乏包管理工具；為了讓JS可以在任何地方運(yùn)行，以達(dá)到Java、P...

    kgbook 評(píng)論0 收藏0

  • 從基礎(chǔ)到實(shí)戰(zhàn) 手摸手帶你掌握新版Webpack4.0詳解 一起讀文檔

    摘要：構(gòu)建構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行代碼，包括如下內(nèi)容。自動(dòng)刷新監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建刷新瀏覽器。自動(dòng)發(fā)布更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。將文件放入到項(xiàng)目中，在中新建一個(gè)放字體圖標(biāo)的文件夾。 項(xiàng)目地址 github.com/wudiufo/Web… 知識(shí)點(diǎn)概覽： Loader，HMR ,Create React App, Caching, Plug...

    王軍 評(píng)論0 收藏0

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

    摘要：作者按因?yàn)榻坛趟緢D片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步系列教程十五開發(fā)模式與原文地址。而開發(fā)模式就是指定為。在非開發(fā)模式下，需要關(guān)閉此選項(xiàng)，以減小打包體積。在單頁(yè)應(yīng)用中，任何響應(yīng)直接被替代為。 作者按：因?yàn)榻坛趟緢D片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十五)：開發(fā)模式與 webpack-dev-server》原文地址。更歡迎來(lái)我的...

    zengdongbao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<