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