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

資訊專欄INFORMATION COLUMN

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

xiaochao / 1013人閱讀

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

Foreword

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

First Step

我們給第一篇例子中加個(gè)樣式文件我們 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 等都是通過這個(gè)文件被引入頁面的，而不像平常我們引入 js 用

讓我們跑一下

$ webpack entry.js bundle.js

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

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

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

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

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

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

Second Step

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

webpack.config

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

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

$ cnpm install webpack --save-dev

成功在package.json加入依賴

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

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

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

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

同時(shí)簡(jiǎn)化 entry.js 中的 style.css 加載方式：

require("./style.css")

最后運(yùn)行一下

$ webpack

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

這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢

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://specialneedsforspecialkids.com/yun/50482.html

相關(guān)文章

  • 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í)踐

    摘要：說起，其實(shí)早在出現(xiàn)之前，網(wǎng)頁就是在服務(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é)一如往常笑嘻嘻的遞來需求文檔， 縱使內(nèi)心萬般拒絕， 身體倒是很誠實(shí)...

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

  • 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)來了外包在職萌新求內(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

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

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

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

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

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

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

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

0條評(píng)論

xiaochao

男|高級(jí)講師

TA的文章

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