亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

webpack -> vue Component 從入門到放棄（三）

array_huang / 1369人閱讀

摘要：離上一篇已經(jīng)一個(gè)星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來(lái)抒發(fā)抒發(fā)情感。插件的使用一般是在的配置信息選項(xiàng)中指定。本身內(nèi)置了一些常用的插件，還可以通過(guò)安裝第三方插件。從入門到放棄四從入門到放棄二從入門到放棄一源代碼

離上一篇已經(jīng)一個(gè)星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來(lái)抒發(fā)抒發(fā)情感。
上一篇簡(jiǎn)單介紹了webpack的配置，這里稍微再做一一下延伸

插件

插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。
Webpack 本身內(nèi)置了一些常用的插件，還可以通過(guò) npm 安裝第三方插件。接下來(lái)，我們利用一個(gè)最簡(jiǎn)單的 BannerPlugin 內(nèi)置插件來(lái)實(shí)踐插件的配置和運(yùn)行，這個(gè)插件的作用是給輸出的文件頭部添加注釋信息。

修改 webpack.config.js，添加 plugins：

var webpack = require("webpack");
module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {test: /.css$/, loader: "style-loader!css-loader"}
    ]
  },
  plugins:[
    new webpack.BannerPlugin("it is BannerPlugin")
  ]
}

然后運(yùn)行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：

/*! it is BannerPlugin */
/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function

開發(fā)環(huán)境

如果每一次文件的改變，都需要去運(yùn)行一次webpack，那是一件很麻煩的事，例如我用的是sublime寫代碼，要是想運(yùn)行一段代碼，首先要用webpack打包，然后再瀏覽器上還要刷新，簡(jiǎn)直不能忍么。這里有兩種解決方案

watch

看名字就知道是監(jiān)聽的意思，我們來(lái)測(cè)試一下（ps:這里我們加個(gè)有意思的東西，--progress --colors，想知道干嘛用？運(yùn)行一下你就知道了）

$ webpack --progress --colors --watch

// --progress 在編譯的時(shí)候多了個(gè)進(jìn)度顯示
//--colors 一些代碼的高亮
//--watch 雖然不用每次都運(yùn)行webpack了，但是改完一次還需要刷新瀏覽器，才會(huì)發(fā)生變化
webpack-dev-server

所以使用 webpack-dev-server 開發(fā)服務(wù)是一個(gè)更好的選擇。它將在 localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器，并且會(huì)以監(jiān)聽模式自動(dòng)運(yùn)行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack... 可以瀏覽項(xiàng)目中的頁(yè)面和編譯后的資源輸出，并且通過(guò)一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動(dòng)刷新頁(yè)面。

# 安裝
$ cnpm install webpack-dev-server -g

# 運(yùn)行
$ webpack-dev-server --progress --colors

大概的webpack就介紹到這吧，有了基礎(chǔ)的理解后，你可以根據(jù)自己的需求，去官網(wǎng)進(jìn)行相應(yīng)的了解，也可以參考別人項(xiàng)目學(xué)一點(diǎn)經(jīng)驗(yàn)，好了，這篇文章就結(jié)束了，因?yàn)橄乱黄鸵Y(jié)合vueComponent了，在完成component的結(jié)合后，我相信你對(duì)webpack會(huì)有一個(gè)更好的認(rèn)識(shí)。

webpack -> vue Component 從入門到放棄（四
webpack -> vue Component 從入門到放棄（二）
webpack -> vue Component 從入門到放棄（一）
github源代碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81938.html

相關(guān)文章

  • Vuex從入門到放棄（webpack自動(dòng)導(dǎo)入模塊 命名空間 輔助函數(shù)）

    摘要：從入門到放棄自動(dòng)導(dǎo)入模塊命名空間輔助函數(shù)什么是什么是狀態(tài)管理，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源，以聲明方式將映射到視圖，響應(yīng)在上的用戶輸入導(dǎo)致的狀態(tài)變化。最后重點(diǎn)來(lái)了外包在職萌新求內(nèi)推位置廣州 Vuex從入門到放棄（webpack自動(dòng)導(dǎo)入模塊 命名空間 輔助函數(shù)） 1.什么是vuex 1.1 什么是狀態(tài)管理 state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源； view，以聲明方式將 state 映射到視圖； actio...

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

  • wepback入門到放棄

    摘要：四配置配置規(guī)則放在的數(shù)組里，每個(gè)是一個(gè)對(duì)象，是正則匹配，匹配文件后綴名，是要用是數(shù)組是所需要的是要加載哪些文件，是忽略掉哪些文件。實(shí)現(xiàn)解析，用會(huì)在寫入在文件頂端導(dǎo)入中加入插件。 最近研究webpack略有小成，特此寫篇博客。雖然webpack有官網(wǎng)api,但是個(gè)人認(rèn)為webpack api一點(diǎn)都不人性化， 不自己研究研究，根本看不懂。今天先從寫webpack-dev-server開始。...

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

  • Vue.js 服務(wù)端渲染業(yè)務(wù)入門實(shí)踐

    摘要：說(shuō)起，其實(shí)早在出現(xiàn)之前，網(wǎng)頁(yè)就是在服務(wù)端渲染的。沒有涉及流式渲染組件緩存對(duì)的服務(wù)端渲染有更深一步的認(rèn)識(shí)，實(shí)際在生產(chǎn)環(huán)境中的應(yīng)用可能還需要考慮很多因素。選擇的服務(wù)端渲染方案，是情理之中的選擇，不是對(duì)新技術(shù)的盲目追捧，而是一切為了需要。 作者：威威（滬江前端開發(fā)工程師）本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處。 背景 最近， 產(chǎn)品同學(xué)一如往常笑嘻嘻的遞來(lái)需求文檔， 縱使內(nèi)心萬(wàn)般拒絕， 身體倒是很誠(chéng)實(shí)...

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

  • vue-cli “從入門到放棄”

    摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...

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

  • vue-cli “從入門到放棄”

    摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...

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

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

0條評(píng)論

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