webpack
-
是一個【模塊化管理工具】兼【打包工具】
-
是一個工具(和seajs,requirejs管理前端模塊的方式是不一樣)
-
在webpack一個文件就是一個模塊!
-
seajs,requirejs
- 模塊化!
-
webpack也能對前端資源進行模塊化管理!
- 不是某個要在頁面引入的js文件
- 是一個工具
- webpack允許我們在前端代碼像node代碼一樣去引入一個包(文件)
- webpack會把我們寫的類似node的模塊化方式，做轉換，使其他能夠以瀏覽器中運行
- module.exports = '小明' // xx.js
- require('./xx.js') // a.js
安裝webpack
-
npm install -g webpack- 帶-g參數表示全局安裝!
-
通過webpack來管理我們的代碼，那么我們的代碼一般是不會暴露到全局的!
基本使用
- 我們在前端代碼像使用node代碼一樣用module.exports及require來管理(描述)模塊的依賴關系,
但是這樣的代碼是不能直接在瀏覽器中運行的
var myjack = require('./jack.js')
var myrose = require('./rose.js')
console.log(myjack.money)
- 我們需要使用webapck來管理(轉換)我們的代碼,使其符合瀏覽器的規則!
webpack <入口文件名> <輸出文件名>- webpack會把我們在代碼所依賴的文件(通過require獲取的文件)合並到一起!
- 並且【不會產生全局變量】(除非顯示的通過window點一個屬性)
通過配置文件的方式使用webpack
- 在項目目錄添加:
webpack.config.js文件 - 在文件中添加以下內容
// 這是webpack的配置文件
// 每次修改完或着新增，都要重新編譯，敲得代碼太長，所以模塊化一下
// 要求在這個文件中暴露一個對象，按照node 的請求去寫就行啦
module.exports = {
// 這個屬性表明，整個項目的入口文件是誰
entry:'./src/app.js',
// 這個屬性表示，我們項目通過webpack打包后的輸出文件及輸出路徑
output:{
filename:'./dist/bundle.js' // 指定輸出的文件名
}
}
- 直接在當前目錄的命令行，執行命令：
webpack就可以了!
將css也合並到js代碼中
css-loader 和 style-loader
- css-loader,把css合並到js中(沒有添加dom操作，也就是沒把css添加到頁面中)
+npm install css-loader --save-dev - style-loader,把css-loader處理的結果添加到頁面(dom)中
+npm install style-loader@0.13.1 --save-dev
+注意：這里的命令一定要指定版本號，否則出錯
output:{
filename:'./dist/bundle.js' // 指定輸出的文件名
},
module:{
loaders:[ // Loaders是提供了一些特定的功能
{
// 表明我們(用到的loader)要處理的文件是什么
test:/\.css$/, // 要把指定的css加入到js中
// loader屬性指定具體的loader,這個loader其實是一個npm外
// css-loader就是一個npm 包！
// `npm install css-loader --save-dev`
// css-loader只是把css代碼加入到js代碼（並沒把樣式添加到dom中）
// style-loader 這個loader這為了把css-loader得到css樣式添加到dom中
//
// webpack會先調用!右邊的包來處理我們的文件，然后把!右邊處理的結果交給左邊的包來處理!
loader:'style-loader!css-loader'
}
]
}
less-loader
- 作用: 這個loader會讀取匹配的less文件，然后把less文件內容轉換為css內容
一般會配合css-loader 和 style-loader一起使用! - 注意，下載less-loader會缺少一個less包：
npm install less --save-dev，這個需要另外單獨安裝!
require('./xxx.less') // 用到的less文件要引入才能生效！
module.exports = {
entry: './src/app.js',
output:{
filename:'./dist/bundle.js'
},
module:{
loaders:[
{
test: /\.less$/ ,// 匹配當前loader要處理的文件
// less-loader作用:是讀取test規則對應的文件，然后把讀取到的less文件內容轉換為css內容
loader:'style-loader!css-loader!less-loader'
}
]
}
}
sass-loader
- 安裝:
npm install sass-loader --save - 作用： 這個loader會讀取匹配的scss文件，然后把less文件內容轉換為css內容
- 注意,sass-loader的依賴包node-sass和webpack不會自動安裝上
需要手動安裝:npm install node-sass webpack --save-dev
url-loader
- 作用: 是能css中使用的圖片進行處理，如果圖片比指定的條件小，就轉換為base64
如果比指定的條件大就不轉換 - 注意，安裝時會缺少一個file-loader包:
npm install file-loader --save-dev- 這個file-loader里會對文件操作!
- css: bg:url()
- 在css中有好小圖標,可能有100個，瀏覽器會再發100個請求!
- 如果能夠把這個100個請求合成1個，或者0個就更好了!
- 注意：只能夠處理css的圖片，為什么要處理css的圖片呢，因為css圖片更多的時候是圖標，而html中
直接寫一個img的話，一般圖片是比較大的，不需要轉換為base64，轉換的話反而得不償失，如果是html
圖片的話，我們用的是懶加載來解決問題
// base64
module.exports = {
// 指定入口文件
entry:'./src/app.js',
output:{
path:'dist',// path指定父目錄，webpack會把path與filename拼接成一個路徑
// 同時是指定默認文件的生成目錄
filename:'bundle.js'
},
module:{
loaders:[
// 這里要分開寫，寫兩個loader,因為他們用法不一樣，一個用來css語法轉換，
// 一個用來css里面的圖片轉換
{
test: /\.css$/,
loader:'style-loader!css-loader',// 從右往左執行!
},
{
test:/\.(jpg|jpeg)/,
// 這里的./是相對於path屬性指定的目錄
// name參數指定如果不生成base64時，文件的輸出目錄及輸出的文件
// [name]表示原文件名,[ext]表示源文件擴展名
// 如果不指定name參數，輸入的圖片名是隨機的
// limit: 限制轉換的大小
// 值的單位是字節,byte
// 1byte = 8bit (位) 字節
// 1kb = 1024 字節
// 1M = 1024kb
// 1000
loader:'url-loader?limit=12048&name=./img/[name].[ext]'
}
]
}
}
babel-loader
-
babel-loader依賴於babel這個工具!，是在webpack中使用的,可以進行多種語法轉換!
- babel是獨立的一款工具，可以用來進行多種語法轉換，
- 補充：在瀏覽器直接引入
Browser.js也可以進行語法轉換，但是轉換性能比較 低一些
-
寫代碼時，用es6，在寫完之后，再用工具轉換為es5（為什么要寫es6呢，因為我想體驗es6的簡潔寫法，
那為什么又要轉換為es5呢，因為瀏覽器的兼容性問題） -
安裝
npm install babel-loader --save-dev -
*注意：安裝時還需要安裝babel-core，:
-
npm install babel-core@6.0.0 webpack --save-dev* 你也可以根據提示，看看提示你缺什么，你就安裝什么 -
具體版本號，看提示
-
如果是對es6進行請求轉換，還需要安裝:
npm install babel-preset-es2015 --save-dev
// 最終這個配置文件 是由node去解析
const path = require('path') //需要引入path模塊
const webpack = require('webpack')
module.exports = {
// 入口文件目錄
// 因為我們要分開打包，所以不止一個入口
entry:{
// 在這里寫路徑的時候推薦把絕對路徑也寫上，把路徑完整地寫上來
// 在任何模塊文件內部，可以使用__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑
app:path.join(__dirname, 'src/app.js'),
// 隨便寫一個屬性，值為數組，數組中的元素是我們希望單獨打包的第三方包的名字
vender001:['angular']
},
// 輸入路徑
output:{
// 輸出的文件目錄
path: path.join(__dirname, 'dist'),
// 輸出的文件名(也就是打包后的文件)
filename:'bundle.js'
},
module:{
// 這里是我們webpack打包用到的loaders
loaders:[
{
test:/\.js$/,
// 也需要一些參數，babel不僅僅是能轉換es6，還能將react的語法轉換成js，
// 所以我們要通過query這個屬性來指定一下轉化為那種
loader:'babel-loader',
query:{
// 這個es2015也是對應了一個npm 包
// npm install babel-preset-es2015 --save-dev
presets:['es2015'] //這個presets是babel里面的一個屬性
}
}
]
}
}
對第三方包進行分離
- 這個分離不是必須的
- 把我們項目用到的包(如果有第三方包，我們分打包合並!)
- 一個可以利用瀏覽器緩存對第三方包進行緩存!
- 其實就是我們自己寫的文件打一個包，其他第三方我文件打一個包!
// 入口文件目錄
entry:{
app:path.join(__dirname, 'src/app.js'),
// 隨便寫一個屬性，值為數組，數據中的元素是我們希望單獨打包的第三方包的名字
vender001:['angular']
},
// 輸入路徑
output:{
// 輸出的文件目錄
path: path.join(__dirname, 'dist'),
// 輸出的文件名(也就是打包后的文件)
filename:'bundle.js'
},
// 這個屬性里寫上webpack中要使用到的插件
plugins:[
// 要使用webpack自的插件來分離第三方包
new webpack.optimize.CommonsChunkPlugin(
// 第一個參數，就是我們在entry寫的一個屬性名
// webpack會自動讀取對應的值，找到相應的包
'vender001',
// 第二個參數，是第三方包單獨打包后生成的文件名
'vender.js'
)
]
webpack 插件
自動打開瀏覽器插件(open-browser-webpack-plugin)
創建index.html插件(html-webpack-plugin)
// npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html' // 指定模板,最終生成的html會生成到path屬性對應的位置
})
]
刪除目錄插件(clean-webpack-plugin)
拷貝文件插件(copy-webpack-plugin)
webpack 相關參數
-
- --watch,自動監視文件，重新打包
-
- --progress 在打包進可以看到進度
-
- -p 壓縮js代碼
-
- -d 生成js代碼對應的.map文件(
當我們打調試工具時，瀏覽器會自動請求與壓縮的js文件同級目錄的js文件名.map文件
這個文件中的內容表示我們的代碼是如何壓縮的!)
- -d 生成js代碼對應的.map文件(