成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

array_huang / 1314人閱讀

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

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

插件

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

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

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

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

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

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

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

watch

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

$ webpack --progress --colors --watch

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

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

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

# 運行
$ webpack-dev-server --progress --colors

大概的webpack就介紹到這吧，有了基礎(chǔ)的理解后，你可以根據(jù)自己的需求，去官網(wǎng)進行相應(yīng)的了解，也可以參考別人項目學(xué)一點經(jīng)驗，好了，這篇文章就結(jié)束了，因為下一篇就要結(jié)合vueComponent了，在完成component的結(jié)合后，我相信你對webpack會有一個更好的認識。

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81938.html

相關(guān)文章

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

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

    blankyao 評論0 收藏0

  • wepback入門到放棄

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

    blastz 評論0 收藏0

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

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

    miya 評論0 收藏0

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

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

    DrizzleX 評論0 收藏0

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

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

    william 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<