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

array_huang 發布于2019-08-20 14:48 / 1285人閱讀

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

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

插件

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

修改 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，可以看到文件頭部出現了我們指定的注釋信息：

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

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

開發環境

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

watch

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

$ webpack --progress --colors --watch

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

webpack-dev-server

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

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

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

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

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

云服務器 GPU云服務器 spark從入門到前端從入門到精通云計算從入門到精通 html從入門到精通

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

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

Vuex從入門到放棄（webpack自動導入模塊命名空間輔助函數）

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

blankyao 2019-08-26 18:36 評論0 收藏0
wepback入門到放棄

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

blastz 2019-08-23 10:23 評論0 收藏0
Vue.js 服務端渲染業務入門實踐

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

miya 2019-08-21 16:18 評論0 收藏0
vue-cli “從入門到放棄”

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

DrizzleX 2019-08-01 17:19 評論0 收藏0
vue-cli “從入門到放棄”

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

william 2019-08-20 18:28 評論0 收藏0