成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

webpack學(xué)習(xí)心得

only_do / 964人閱讀

摘要:學(xué)習(xí)心得出于對的好奇,決定要去學(xué)習(xí)門技術(shù),提升自己。安裝命令行輸入回車,全局安裝命令行輸入回車輸出版本號,表示安裝成功。進(jìn)入到我們的項(xiàng)目中,我創(chuàng)建的項(xiàng)目為,在這個項(xiàng)目下創(chuàng)建配置項(xiàng),命令行輸入一路回車。

webpack學(xué)習(xí)心得
 出于對webpack的好奇,決定要去學(xué)習(xí)門技術(shù),提升自己。
什么是webpack?
webpack是德國開發(fā)者開發(fā)的模塊加載器兼打包工具,在webpack中,它能把各種資源,例如js(含jsx),coffee,樣式(含less、sass),圖片等都作為模塊來使用和處理。因此,webpack當(dāng)中js可以引用css,css中可以嵌入圖片dataUrl。
為什么要用webpack?
webpack是前端一個工具,可以讓各種模塊進(jìn)行加載,預(yù)處理,再進(jìn)行打包,它能有g(shù)unt或gulp所有基本功能,優(yōu)點(diǎn)如下:
    1.支持commonjs和AMD模塊。
    2.支持很多模塊加載器的調(diào)用,可以使模塊靈活定制
    3.可以通過配置打包成多個文件,有效的利用瀏覽器的緩存功能提升性能
安裝node.js
選擇對應(yīng)版本先下載一個node.js安裝包。

下載完成后雙擊即可。
命令行輸入node -v,回車輸出nodejs版本號,表示安裝成功。
命令行輸入npm -v,回車輸出npm版本號,表示安裝成功(nodejs集成了npm)。
由于npm不穩(wěn)定,下載速度慢,建議使用淘寶鏡像:
`npm install -g cnpm --registry=https://registry.npm.taobao.org`,
命令行輸入cnpm -v,回車輸出cnpm版本號,表示安裝成功。以后安裝就使用cnpm命令。
安裝webpack
1.命令行輸入 `sudo cnpm install webpack -g`回車,全局安裝webpack,命令行輸入`webpack -v`回車,輸出webpack版本號,表示安裝成功。(mac系統(tǒng)下需要輸入sudo提高權(quán)限,否則報(bào)錯)。
2.cd進(jìn)入到我們的項(xiàng)目中,我創(chuàng)建的項(xiàng)目為**********/webpack,在這個項(xiàng)目下創(chuàng)建配置項(xiàng),命令行輸入 `cnpm init`,一路回車。
這時我們的項(xiàng)目會多出一個package.json的文件

接下來,在項(xiàng)目下創(chuàng)建webpack的依賴項(xiàng),命令行輸入`cnpm install webpack --save-dev`。
再來看我們的項(xiàng)目多出一個node_modules文件且package.json多出一行文字

到這里,準(zhǔn)備工作已經(jīng)完成,我們可以使用webpack了。
開始webpack之旅

1.小試牛刀

開始之前,我們構(gòu)建一下項(xiàng)目結(jié)構(gòu),如圖:

main.js作為一個入口文件,用work.js來編寫各種行為特效。
main.js中使用require來加載work.js。

在頁面中寫入一段話。

命令行輸入`webpack app/main.js publice/dist/webpack.js`,回車。
意思是將根目錄下的app/入口文件main.js生成新的js文件,把新生成的js放到對應(yīng)路徑下,命名為webpack.js
再看我們的項(xiàng)目,多出一個dist文件夾和一個webpack.js文件。

在index.html中引入webpack.js,執(zhí)行看看效果。

OK,小試牛刀成功。

2.webpack之文件路徑

上面小試牛刀,我們需要輸入文件路徑,當(dāng)我們項(xiàng)目復(fù)雜了,寫文件路徑也很費(fèi)勁,下面我們來解決這個問題。

 

 - 創(chuàng)建webpack.config.js
在項(xiàng)目根目錄下創(chuàng)建一個文件叫webpack.config.js(必須是這個名字),創(chuàng)建配置項(xiàng)

現(xiàn)在在命令行直接執(zhí)行webpack就可以了。
webpack之loaders

1.loaders是干什么的?

loaders是webpack中最核心的功能。通過使用不同的loader,webpack通過調(diào)用外部的腳本或工具可以對各種各樣的格式的文件進(jìn)行處理,比如說分析json文件并把它轉(zhuǎn)換成javascript文件,或者說把下一代的js文件(ES6,ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器可以識別的js文件。

2.loaders配置項(xiàng)

loaders需要多帶帶安裝并且需要webpack.config.js下的modules關(guān)鍵字下進(jìn)行配置,loaders的配置選項(xiàng)包括以下幾方面:
1)test:一個匹配loaders所處理的文件的拓展名的正則表達(dá)式(必須)
2)loader:loader的名稱(必須)
3)include/exclude:手動添加必須處理的文件(文件夾)或屏蔽不需要處理的文件(文件夾)(可選)
4)query:為loaders提供額外的設(shè)置選項(xiàng)(可選)

3.如何使用loaders

loaders之json-loader使用

命令行輸入cnpm install --save-dev json-loader安裝json-loader,
在webpack.config.js創(chuàng)建module


OK,配置項(xiàng)已經(jīng)寫完了。
接下來創(chuàng)建json文件,隨便寫點(diǎn)內(nèi)容,在工作文件work.js引入

命令行輸入`webpack`,運(yùn)行webpack。

json-loader成功!

loaders之css-loader和style-loader

webpack提供兩個工具處理樣式表,css-loader和style-loader
css-loader使你能夠使用類似@import和url(...)的方法實(shí)現(xiàn)require()的功能,style-loader將所有的計(jì)算后的樣式加入頁面中,二者組合在一起使你能夠把樣式表嵌入webpack打包后的js文件中。
命令行輸入cnpm install --save-dev style-loader css-loader,安裝style-loader和css-loader
配置項(xiàng)寫法:
module: {

   loaders: [
       {
           test: "/.css$/",
           loader: "style!css"
         }
   ]

}

新建一個css文件并在入口文件main.js引入,執(zhí)行webpack,看下效果

奇怪了,報(bào)錯,看了半天。
將配置項(xiàng)換種寫法

rules:[{
       test:/.css$/,
       use: ["style-loader", "css-loader"],
     }]

執(zhí)行webpack,看下效果

OK,css引進(jìn)去了。


lodaer之postcss-loader,autoprefixer

考慮到兼容性問題,為css添加前綴,我們就使用postcss-loader,autoprefixer。
命令行輸入cnpm install --save-dev postcss-loader autoprefixer,
配置項(xiàng):

在webpack.config.js同級目錄下新建postcss.config.js

執(zhí)行webpack,去瀏覽器審查元素

前綴添加成功!

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

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/112099.html

相關(guān)文章

  • webpack學(xué)習(xí)心得

    摘要:學(xué)習(xí)心得出于對的好奇,決定要去學(xué)習(xí)門技術(shù),提升自己。安裝命令行輸入回車,全局安裝命令行輸入回車輸出版本號,表示安裝成功。進(jìn)入到我們的項(xiàng)目中,我創(chuàng)建的項(xiàng)目為,在這個項(xiàng)目下創(chuàng)建配置項(xiàng),命令行輸入一路回車。 webpack學(xué)習(xí)心得 出于對webpack的好奇,決定要去學(xué)習(xí)門技術(shù),提升自己。 什么是webpack? webpack是德國開發(fā)者開發(fā)的模塊加載器兼打包工具,在webpack中,...

    劉永祥 評論0 收藏0
  • Webpack構(gòu)建多頁應(yīng)用心得體會

    摘要:構(gòu)建的基于的多頁應(yīng)用腳手架,本文聊聊本次項(xiàng)目中構(gòu)建多頁應(yīng)用的一些心得體會。倉庫構(gòu)建的舊版多頁應(yīng)用構(gòu)建的多頁應(yīng)用。例如多頁應(yīng)用中每個的值對應(yīng)的文件。Webpack構(gòu)建的基于zepto的多頁應(yīng)用腳手架,本文聊聊本次項(xiàng)目中Webpack構(gòu)建多頁應(yīng)用的一些心得體會。 1.前言 由于公司舊版的腳手架是基于Gulp構(gòu)建的zepto多頁應(yīng)用(有興趣可以看看web-mobile-cli),有著不少的痛點(diǎn)。例...

    Ethan815 評論0 收藏0
  • react+webpack+跨域代理+多頁面 初學(xué)心得分享

    摘要:初學(xué),利用進(jìn)行工程化開發(fā)管理,遇到一些問題,如多頁面處理,跨域代理的設(shè)置,如何同時引入使用。這個命令生成的文件可以放到后端服務(wù)器指定的靜態(tài)文件目錄下,這些就是用來上線的文件。這兩個文件夾下的代碼文件就是為兩個獨(dú)立的頁面準(zhǔn)備的。 初學(xué)react,利用webpack進(jìn)行工程化開發(fā)管理,遇到一些問題,如多頁面處理,跨域代理的設(shè)置,如何同時引入使用jQuery。第一次試水,簡單寫了一個表格組件...

    Chao 評論0 收藏0
  • webpack在前端項(xiàng)目中使用心得一二

    摘要:熟悉了之后,各種新舊項(xiàng)目,大小項(xiàng)目都能用耍的飛起。使用作為文件中的模板安裝,記住不是,也不用配置,只需在標(biāo)簽中指定,就可以愉快的使用語法了,比起看起來簡潔多了。 webpack做文件合并 使用構(gòu)建工具非常常用一個功能就是合并js和css文件,gulp和grunt都是編寫相應(yīng)的任務(wù)來完成,轉(zhuǎn)到webpack突然懵逼了,簡單的項(xiàng)目怎么做文件合并呢?其實(shí)只需把多個js文件同時引入到main....

    qieangel2013 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<