webpack學習之路
當自己在學習webpack的時候，在網上發現中文的很詳細的教程很少，于是便想將自己學習webpack的筆記記錄整理下來，便有了這篇文章，希望對大家有所幫助，如果有錯誤，歡迎大家指出。
在我們開始之前
webpack有多種加載器(Loader,后面會介紹),可以處理各種需要被處理的靜態文件
webpack支持CommonJs AMD CMD規范
-
在使用webpack的項目中，默認配置文件為
webpack.config.js, 模塊文件，和Node寫法一樣，對外暴露接口,主要屬性有:- plugins插件項
- entry入口文件配置項
- output對應輸出項配置
- module.loaders 最關鍵的配置，告知webpack不同的文件需要什么加載器進行處理
-
模塊系統的幾種類型
-
<script>標簽類型- 缺點
- 全局作用域下造成變量的沖
- 文件加載順序很重要
- 模塊與模塊之間的依賴要解決
- 在大型項目中難以維護和管理
- 缺點
-
CommonJs
-
優點
- 服務端模塊能夠重復利用
- 有優秀的包管理工具npm
- 簡單，上手容易
-
缺點
- 不適合瀏覽器端的使用
- 不能做到并行加載模塊
-
-
AMD
-
優點
- 適合瀏覽器的異步加載機制
- 并行加載模塊
-
缺點
- 代碼難以經營和維護
-
-
ES6
-
優點
- 未來的ES規范
-
缺點
- 瀏覽器對ES6的支持還需要一段時間
- 能夠依賴的現有的模塊少
-
-
' 轉換 ' 的思想
模塊要能夠在客戶端中去執行，則必須將它們從 server => browser
-
極端的想法:
- 一個請求一個模塊 只有需要的模塊會被轉換，但是耗費資源，時間長
- 所有請求都在一個模塊 不需要的模塊也會被轉換 時間短，耗費資源少
-
分塊轉換的想法:
- 將眾多的模塊切成許多片，在初始化時的請求不會包括完整的代碼，并且在初始化時不需要的模塊切片會在后續加載過程中按需加載。并且將模塊化的切片方式是可以有開發人員自己定義的。
wepback它的目標是是什么？
webpack它能將依賴的模塊轉化成可以代表這些包的靜態文件
它的目標有
- 將依賴的模塊分片化，并且按需加載
- 解決大型項目初始化加載慢的問題
- 每一個靜態文件都可以看成一個模塊
- 可以整合第三方庫
- 能夠在大型項目中運用
- 可以自定義切割模塊的方式
webpack較之其他類似工具有什么不同？
- 有同步和異步兩種不同的加載方式
- Loader,加載器可以將其他資源整合到JS文件中，通過這種方式，可以講所有的源文件形成一個模塊
- 優秀的語法分析能力，支持 CommonJs AMD 規范
- 有豐富的開源插件庫，可以根據自己的需求自定義webpack的配置
webpack為什么要將所有資源放在一個文件里面？
我們知道，對于瀏覽器來說，加載的資源越少，響應的速度也就越快，所以有時候我們為了優化瀏覽器的性能，會盡可能的將資源合并到一個主文件app.js里面。但是這導致的很大的缺點：
- 當你的項目十分龐大的時候，不同的頁面不能做到按需加載，而是將所有的資源一并加載，耗費時間長，性能降低。
- 會導致依賴庫之間關系的混亂，特別是大型項目時，會變得難以維護和跟蹤。比如:哪些文件是需要A模塊加載完后才能執行的？哪些頁面會受到多個樣式表同時影響的？ 等許多問題。
而webpack可以很好的解決以上缺點,因為它是一個十分聰明的模塊打包系統，當你正確配置后，它會比你想象中的更強大，更優秀。
開啟wbpack之旅
安裝webpack
-
我們可以直接使用npm進行全局安裝
npm install webpack -g -
在常規項目中把webpack依賴加入到package.json
npm initnpm install webpack --save
更詳盡的安裝方法個可以參考webpack安裝
webpak命令行常見使用的操作
啟動
webpack
如果你想當改變一個文件而讓webpack實時編譯
webpack --watch
如果你想把默認的配置文件webpack.config.js改成自定義文件
webpack --config customconfig.js
webpack的用法
首先先貼上一個比較完整的webpack.config.js的代碼，再詳細介紹：
// webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
}),
new webpack.optimize.OccurenceOrderPlugin()
],
module: {
loaders: [{
test: /\.css$/,
loaders: ['style', 'css']
}]
}
}
就像我在前面提到的，webpack.config.js的寫法和在Node里的寫法相同，我們主要看的就是文件中的module.exports里面的內容
entry 是指入口文件的配置項，它是一個數組的原因是webpack允許多個入口點。
-
output是指輸出文件的配置項
- path － 表示輸出文件的路徑
- filename - 表示輸出文件的文件名
-
plugins 顧名思義，使用插件可以給webpack添加更多的功能，使webpack更加的靈活和強大,webpack有兩種類型的插件:
-
webpack內置的插件
// 首先要先安裝webpack模塊 var webpack = require("webpack"); module.exports = { new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false, }, }) }; -
webpack外置插件
比如:
//npm install component-webpack-plugin 先要在安裝該模版 var ComponentPlugin = require("component-webpack-plugin"); module.exports = { plugins: [ new ComponentPlugin() ] }
更多的插件以及插件的用法，大家可以到webpack的插件上查看。
-
-
module 配置處理文件的選項
-
loaders 一個含有wepback中能處理不同文件的加載器的數組
- test 用來匹配相對應文件的正則表達式
- loaders 告訴webpack要利用哪種加載器來處理test所匹配的文件
-
loaders 的安裝方法
$ npm install xxx-loader --save-dev
-
講到這里，我相信大家都會對wepback有了更深的認識，但是卻十分的松散，不能把它們串起來，那接下來我就用幾個小的demo來讓大家梳理梳理起來
舉個例子
首先請大家建立一個和我一樣文件結構的文件夾，在這里我也說明下這個demo大概要做的事情，就是將css文件都打包放到一個js文件，并且對圖片解壓，并且要對這個js文件進行自動壓縮。
DemoOne
|- dist
|- src
|- index.js
|- index.html
|- style.css
|- demo.png(隨便找一張圖片就可以)
|- package.json
|- webpack.config.js
首先看index.html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<div>Hello,world</div>
[站外圖片上傳中……(1)]
<script src="../dist/bundlle.js"></script>
</body>
</html>
再看style.css
body{
background:red;
}
這個時候我們還沒有寫webpack.config.js,打開index.html,會看到
打開控制臺后，你會發現
接下來，我們在webpack.config.js下加上如下代碼
// webpack.config.js
var path = require('path')
var webpack = require('webpack');
module.exports = {
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
})
],
module: {
loaders: [{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.(png|jpg)$/,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}]
}
}
當然，在開始用webpack之前，要先安裝相對應的模塊，解析css文件 圖片文件以及因為要對文件進行壓縮，所以也要用到上文中所說的webpack自身內置的插件,所以也要導入webpack模塊
$ npm install style-loader css-loader image-webpack-loader webpack --save-dev
安裝好之后使用webpack命令后會有這樣的提示
但是這個時候你打開瀏覽器會發現，頁面依舊沒有什么效果，這是肯定的！我想大家肯定知道下一步該怎么做了，沒錯！在入口文件里面增加內容
require('./style.css');
require('./demo.png');
再運行webpack,出現上圖類似提示后，打開瀏覽器，你會發現變成了這個樣子
并且在dist文件夾內，多出了兩個文件，一個f1341ce5ea165e06ec3358441b52d5ea.png（隨機產生的名字）如果你想獲得這個名字，可以將require('./demo.png')輸出查看，以及還有bundle.js,比較圖片前后的大小，
可以發現，文件大小發生了改變。打開bundle.js你會發現該文件也被壓縮了。是不是感覺很神奇？！
還有一個比較好玩的插件htmlwebpackplugin可以點擊這里看看，把上面的例子改變下哦。
最后
我相信看到這里你對webpack一定有了一定的認識，其實，還webpack還有很多強大的功能，比如，webpack-dev-server可以自動生成一個小型的NodeJs Express服務器從而實現webpack十分實用的功能熱替換(HMR) 和其它的工具gulp grunt等一起使用。。。最后值得一提的是react和webpack是一對絕佳cp啊，有木有?。?/p>
最后，希望這篇博客對大家有所幫助（如果是，請盡情star哦，??），歡迎提出您的寶貴建議～
