webpack學(xué)習(xí)筆記(1)
webpack概念-代碼打包工具题涨，給定一個(gè)入口文件缅茉，找到這個(gè)文件所依賴的模塊和這個(gè)依賴模塊所依賴的模塊车酣，用loaders來處理這些模塊外遇，使得瀏覽器可以識(shí)別這些模塊的語法票灰。
為什么要使用webpack
隨著用戶界面的復(fù)雜度提升女阀，前端的業(yè)務(wù)邏輯也變得多和復(fù)雜，為了提高開發(fā)效率米间，出現(xiàn)了許多的解決方案强品。
- sass less stylus這類的提高css代碼復(fù)用的預(yù)處理器
- ES6的新特性語法
- 前端的MVVM框架的模塊化開發(fā)
- ......
運(yùn)用了這些開發(fā)效率確實(shí)有所提升，但是也出現(xiàn)新的麻煩事屈糊，那就是代碼的解析的榛，像sass less這些css語法、ES6的新特性逻锐，瀏覽器都不能解析運(yùn)行夫晌，我們還要手動(dòng)去把sass、less等轉(zhuǎn)成css語法昧诱，把ES6語法轉(zhuǎn)成ES5語法晓淀。這實(shí)在是麻煩。使用webpack就能夠?qū)崿F(xiàn)自動(dòng)打包盏档。當(dāng)然凶掰，webpack做的還不只是打包，使用webpack插件蜈亩，還能實(shí)現(xiàn)熱更新懦窘、代理服務(wù)、代碼壓縮稚配，刪除代碼的重復(fù)引用部分等畅涂。通過webpack打包實(shí)現(xiàn)代碼的異步加載，也提升了代碼的運(yùn)行效率道川。
webpack的幾個(gè)部分
entry--文件入口
entry的幾種寫法
module.exports = {
//入口文件 打包的入口 入口可以多個(gè)
entry:'index.js' //路徑
}
module.exports = {
entry: ['index.js','index2.js']
}
module.exports = {
entry:{
index: 'index.js'
}
}
output--文件出口,打包生成的文件的描述(bundle),當(dāng)有多個(gè)entry時(shí)午衰，這樣寫立宜，打包出來后，fileName將會(huì)根據(jù)entry的名字不同而不同臊岸。
module.exports = {
entry:{
index: 'index.js',
index2: 'index2.js'
},
output:{
filenName : '[name].main.[hash:5].js'
}
}
loader--解析 css less es6等,不僅僅是js了
module.exports ={
module:{
rules:[
{
test: /\.css$/,
use: 'css-loader'
}
]
}
}
plugins--應(yīng)用插件可以處理代碼（壓縮代碼 提取變量 混淆代碼）
const webpack = require('webpack')
module.exports ={
plugins: {
new webpack.optimize.UglifyJsplugin()
}
}
