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

資訊專欄INFORMATION COLUMN

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

DobbyKim / 2614人閱讀

摘要：我們可以根據(jù)模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進行處理，這正是強大的原因。這篇就這樣吧，感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼

Foreword

上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。

First Step

我們給第一篇例子中加個樣式文件我們 style.css

body { background: yellow; }

然后修改 entry.js

require("!style-loader!css-loader!./style.css") // 載入 style.css
document.getElementById("app").innerHTML="it works";
require("./content.js");

ps: 這里就體現(xiàn)loader的用處了，我們先回顧一下index.html的代碼

在這里我們只引入webpack打包生成后的bundle.js，所有的js css 等都是通過這個文件被引入頁面的，而不像平常我們引入 js 用

讓我們跑一下

$ webpack entry.js bundle.js

刷新index.html后就能看到body被改為 yellow 了

如果每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。我們可以根據(jù)模塊類型（擴展名）來自動綁定需要的 loader。

將 entry.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ,(ps:我用的是webpack 2.2.1版本的，在這里它已經(jīng)不允許在使用loaders 時去省略 -loader 這個后綴了，所以打包時報錯，請檢查你是否寫成了require("!style!css!./style.css") ) 然后執(zhí)行：

//為了看效果，我們可以在style.css里面把yellow換成其他顏色
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

# 有些環(huán)境下可能需要使用雙引號 而且需要在感嘆好前加上斜杠進行轉(zhuǎn)譯
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

顯然，這兩種使用 loader 的方式，效果是一樣的。

Second Step

要是每次都需要打一堆字符串去打包，簡直無法忍受，所以我們需要簡化，簡化。。。。

webpack.config

Webpack 在執(zhí)行的時候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認情況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者通過 --config 選項來指定配置文件。

首先我們還是要先安裝webpack依賴，之前的demo都是在全局的webpack下操作的，現(xiàn)在我們要在項目目錄下安裝webpack

$ cnpm install webpack --save-dev

成功在package.json加入依賴

然后創(chuàng)建一個配置文件 webpack.config.js：

#此文件不能寫注釋，我這里圖方便，就以注釋的方式進行注解了
var webpack = require("webpack"); // 引入webpack 模塊
module.exports = { //commonJs模塊規(guī)則寫法
  entry: "./entry.js", //入口文件，這里指的是根目錄下的entry.js作為入口文件
  output: {//輸出接口
    path: __dirname,//項目輸出的路徑（__dirname為絕對路徑）
    filename: "bundle.js"http://文件以bundle.js輸出
  },

//定義了對模塊的處理邏輯，這里可以用 loaders 定義了一系列的加載器，
以及一些正則。當需要加載的文件匹配test的正則時，
就會調(diào)用后面的 loader 對文件進行處理，這正是 webpack 強大的原因。
  module: {
    loaders: [
      {test: /.css$/, loader: "style-loader!css-loader"}
    ]
  }
}

詳細的其他配置信息可以去官網(wǎng)進行查看

同時簡化 entry.js 中的 style.css 加載方式：

require("./style.css")

最后運行一下

$ webpack

可以看到 webpack 通過配置文件執(zhí)行的結(jié)果和上一章節(jié)通過命令行 webpack entry.js bundle.js --module-bind "css=style-loader!css-loader" 執(zhí)行的結(jié)果是一樣的。

這篇就這樣吧，感覺進度有點慢

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81793.html

相關(guān)文章

  • wepback入門到放棄

    摘要：四配置配置規(guī)則放在的數(shù)組里，每個是一個對象，是正則匹配，匹配文件后綴名，是要用是數(shù)組是所需要的是要加載哪些文件，是忽略掉哪些文件。實現(xiàn)解析，用會在寫入在文件頂端導入中加入插件。 最近研究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)品同學一如往常笑嘻嘻的遞來需求文檔， 縱使內(nèi)心萬般拒絕， 身體倒是很誠實...

    miya 評論0 收藏0

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

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

    blankyao 評論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條評論

DobbyKim

男|高級講師

TA的文章

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