資訊專(zhuān)欄INFORMATION COLUMN
摘要：學(xué)習(xí)心得出于對(duì)的好奇，決定要去學(xué)習(xí)門(mén)技術(shù)，提升自己。安裝命令行輸入回車(chē)，全局安裝命令行輸入回車(chē)輸出版本號(hào)，表示安裝成功。進(jìn)入到我們的項(xiàng)目中，我創(chuàng)建的項(xiàng)目為，在這個(gè)項(xiàng)目下創(chuàng)建配置項(xiàng)，命令行輸入一路回車(chē)。
webpack學(xué)習(xí)心得
出于對(duì)webpack的好奇，決定要去學(xué)習(xí)門(mén)技術(shù)，提升自己。什么是webpack？
webpack是德國(guó)開(kāi)發(fā)者開(kāi)發(fā)的模塊加載器兼打包工具，在webpack中，它能把各種資源，例如js(含jsx)，coffee，樣式（含less、sass），圖片等都作為模塊來(lái)使用和處理。因此，webpack當(dāng)中js可以引用css,css中可以嵌入圖片dataUrl。為什么要用webpack？
webpack是前端一個(gè)工具，可以讓各種模塊進(jìn)行加載，預(yù)處理，再進(jìn)行打包，它能有g(shù)unt或gulp所有基本功能，優(yōu)點(diǎn)如下：
1.支持commonjs和AMD模塊。
2.支持很多模塊加載器的調(diào)用，可以使模塊靈活定制
3.可以通過(guò)配置打包成多個(gè)文件，有效的利用瀏覽器的緩存功能提升性能
安裝node.js
選擇對(duì)應(yīng)版本先下載一個(gè)node.js安裝包。
下載完成后雙擊即可。 命令行輸入node -v，回車(chē)輸出nodejs版本號(hào)，表示安裝成功。 命令行輸入npm -v,回車(chē)輸出npm版本號(hào)，表示安裝成功(nodejs集成了npm)。 由于npm不穩(wěn)定，下載速度慢，建議使用淘寶鏡像： `npm install -g cnpm --registry=https://registry.npm.taobao.org`, 命令行輸入cnpm -v，回車(chē)輸出cnpm版本號(hào)，表示安裝成功。以后安裝就使用cnpm命令。安裝webpack
1.命令行輸入 `sudo cnpm install webpack -g`回車(chē)，全局安裝webpack,命令行輸入`webpack -v`回車(chē),輸出webpack版本號(hào)，表示安裝成功。(mac系統(tǒng)下需要輸入sudo提高權(quán)限，否則報(bào)錯(cuò))。 2.cd進(jìn)入到我們的項(xiàng)目中，我創(chuàng)建的項(xiàng)目為**********/webpack，在這個(gè)項(xiàng)目下創(chuàng)建配置項(xiàng)，命令行輸入 `cnpm init`,一路回車(chē)。 這時(shí)我們的項(xiàng)目會(huì)多出一個(gè)package.json的文件
接下來(lái)，在項(xiàng)目下創(chuàng)建webpack的依賴(lài)項(xiàng)，命令行輸入`cnpm install webpack --save-dev`。 再來(lái)看我們的項(xiàng)目多出一個(gè)node_modules文件且package.json多出一行文字
到這里，準(zhǔn)備工作已經(jīng)完成，我們可以使用webpack了。開(kāi)始webpack之旅
1.小試牛刀
開(kāi)始之前，我們構(gòu)建一下項(xiàng)目結(jié)構(gòu)，如圖：
main.js作為一個(gè)入口文件，用work.js來(lái)編寫(xiě)各種行為特效。 main.js中使用require來(lái)加載work.js。
在頁(yè)面中寫(xiě)入一段話。
命令行輸入`webpack app/main.js publice/dist/webpack.js`,回車(chē)。 意思是將根目錄下的app/入口文件main.js生成新的js文件，把新生成的js放到對(duì)應(yīng)路徑下，命名為webpack.js 再看我們的項(xiàng)目，多出一個(gè)dist文件夾和一個(gè)webpack.js文件。
在index.html中引入webpack.js，執(zhí)行看看效果。
OK,小試牛刀成功。
2.webpack之文件路徑
上面小試牛刀，我們需要輸入文件路徑，當(dāng)我們項(xiàng)目復(fù)雜了，寫(xiě)文件路徑也很費(fèi)勁，下面我們來(lái)解決這個(gè)問(wèn)題。 - 創(chuàng)建webpack.config.js 在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件叫webpack.config.js（必須是這個(gè)名字）,創(chuàng)建配置項(xiàng)
現(xiàn)在在命令行直接執(zhí)行webpack就可以了。webpack之loaders
1.loaders是干什么的？
loaders是webpack中最核心的功能。通過(guò)使用不同的loader,webpack通過(guò)調(diào)用外部的腳本或工具可以對(duì)各種各樣的格式的文件進(jìn)行處理，比如說(shuō)分析json文件并把它轉(zhuǎn)換成javascript文件，或者說(shuō)把下一代的js文件（ES6,ES7）轉(zhuǎn)換為現(xiàn)代瀏覽器可以識(shí)別的js文件。
2.loaders配置項(xiàng)
loaders需要多帶帶安裝并且需要webpack.config.js下的modules關(guān)鍵字下進(jìn)行配置，loaders的配置選項(xiàng)包括以下幾方面： 1)test:一個(gè)匹配loaders所處理的文件的拓展名的正則表達(dá)式（必須） 2)loader:loader的名稱(chēng)（必須） 3)include/exclude:手動(dòng)添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選） 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)寫(xiě)完了。
接下來(lái)創(chuàng)建json文件，隨便寫(xiě)點(diǎn)內(nèi)容，在工作文件work.js引入
命令行輸入`webpack`，運(yùn)行webpack。
json-loader成功！
loaders之css-loader和style-loader
webpack提供兩個(gè)工具處理樣式表，css-loader和style-loader
css-loader使你能夠使用類(lèi)似@import和url(...)的方法實(shí)現(xiàn)require()的功能，style-loader將所有的計(jì)算后的樣式加入頁(yè)面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的js文件中。
命令行輸入cnpm install --save-dev style-loader css-loader，安裝style-loader和css-loader
配置項(xiàng)寫(xiě)法：
module: {
loaders: [
{
test: "/.css$/",
loader: "style!css"
}
]
}
新建一個(gè)css文件并在入口文件main.js引入，執(zhí)行webpack，看下效果
奇怪了，報(bào)錯(cuò)，看了半天。
將配置項(xiàng)換種寫(xiě)法
rules:[{
test:/.css$/,
use: ["style-loader", "css-loader"],
}]
執(zhí)行webpack，看下效果
OK,css引進(jìn)去了。
lodaer之postcss-loader，autoprefixer
考慮到兼容性問(wèn)題，為css添加前綴,我們就使用postcss-loader，autoprefixer。
命令行輸入cnpm install --save-dev postcss-loader autoprefixer,
配置項(xiàng)：
在webpack.config.js同級(jí)目錄下新建postcss.config.js
執(zhí)行webpack，去瀏覽器審查元素
前綴添加成功！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112099.html
摘要：學(xué)習(xí)心得出于對(duì)的好奇，決定要去學(xué)習(xí)門(mén)技術(shù)，提升自己。安裝命令行輸入回車(chē)，全局安裝命令行輸入回車(chē)輸出版本號(hào)，表示安裝成功。進(jìn)入到我們的項(xiàng)目中，我創(chuàng)建的項(xiàng)目為，在這個(gè)項(xiàng)目下創(chuàng)建配置項(xiàng)，命令行輸入一路回車(chē)。 webpack學(xué)習(xí)心得 出于對(duì)webpack的好奇，決定要去學(xué)習(xí)門(mén)技術(shù)，提升自己。 什么是webpack？ webpack是德國(guó)開(kāi)發(fā)者開(kāi)發(fā)的模塊加載器兼打包工具，在webpack中，...
摘要：構(gòu)建的基于的多頁(yè)應(yīng)用腳手架，本文聊聊本次項(xiàng)目中構(gòu)建多頁(yè)應(yīng)用的一些心得體會(huì)。倉(cāng)庫(kù)構(gòu)建的舊版多頁(yè)應(yīng)用構(gòu)建的多頁(yè)應(yīng)用。例如多頁(yè)應(yīng)用中每個(gè)的值對(duì)應(yīng)的文件。Webpack構(gòu)建的基于zepto的多頁(yè)應(yīng)用腳手架，本文聊聊本次項(xiàng)目中Webpack構(gòu)建多頁(yè)應(yīng)用的一些心得體會(huì)。 1.前言 由于公司舊版的腳手架是基于Gulp構(gòu)建的zepto多頁(yè)應(yīng)用（有興趣可以看看web-mobile-cli），有著不少的痛點(diǎn)。例...
摘要：初學(xué)，利用進(jìn)行工程化開(kāi)發(fā)管理，遇到一些問(wèn)題，如多頁(yè)面處理，跨域代理的設(shè)置，如何同時(shí)引入使用。這個(gè)命令生成的文件可以放到后端服務(wù)器指定的靜態(tài)文件目錄下，這些就是用來(lái)上線的文件。這兩個(gè)文件夾下的代碼文件就是為兩個(gè)獨(dú)立的頁(yè)面準(zhǔn)備的。 初學(xué)react，利用webpack進(jìn)行工程化開(kāi)發(fā)管理，遇到一些問(wèn)題，如多頁(yè)面處理，跨域代理的設(shè)置，如何同時(shí)引入使用jQuery。第一次試水，簡(jiǎn)單寫(xiě)了一個(gè)表格組件...
摘要：熟悉了之后，各種新舊項(xiàng)目，大小項(xiàng)目都能用耍的飛起。使用作為文件中的模板安裝，記住不是，也不用配置，只需在標(biāo)簽中指定，就可以愉快的使用語(yǔ)法了，比起看起來(lái)簡(jiǎn)潔多了。 webpack做文件合并 使用構(gòu)建工具非常常用一個(gè)功能就是合并js和css文件，gulp和grunt都是編寫(xiě)相應(yīng)的任務(wù)來(lái)完成，轉(zhuǎn)到webpack突然懵逼了，簡(jiǎn)單的項(xiàng)目怎么做文件合并呢？其實(shí)只需把多個(gè)js文件同時(shí)引入到main....
閱讀 2585·2021-11-25 09:43
閱讀 1863·2021-09-22 15:26
閱讀 3742·2019-08-30 15:56
閱讀 1714·2019-08-30 15:55
閱讀 1898·2019-08-30 15:54
閱讀 816·2019-08-30 15:52
閱讀 3158·2019-08-29 16:23
閱讀 897·2019-08-29 12:43
