webpack——entry，output,plugins,loader,chunk知識

entry:打包入口

代碼的入口，找到依賴子產品

打包的入口，webpack去哪個檔案找依賴，或是去那個檔案依賴的依賴

可以是一個或者多個入口

例如：

1.module.exports={

entry:'index.js'

}

這個module.exports對象是webpack的配置，配置有一個屬性就是entry,entry屬性的值就是一個檔案名index.js,也可以加一個路徑，隻要可以找到檔案

2.module.exports={

entry:['index.js','vendor.js']

}

這裡entry屬性的值就是一個數組，這就是根據一個檔案建立多個入口

3.module.exports={

entry:{

　　index:'index.js',

　　vendor:'vendor.js'

}

}

這裡entry屬性的值就是一個對象，這個方式相較于前兩個的不同是，這裡可以知道檔案叫什麼，可以有一個key，如果想要繼續添加一個入口可以繼續增加key,擴充性較好

output:輸出

打包成檔案，對打封包件進行描述

可以是一個或者多個

自定義規則

配合CDN

例如：

1.

module.exports={

entry:'index.js',

output:{

filename:'index.min.js'

}

}

單個輸入配單個輸出，filename就是輸出檔案名

2.

module.exports={

entry:{

index:'index.js',

vendor:'vendor.js'

},

output:{

filename:'[name].min.[hash:5].js'

}

}

[name].min.[hash:5].js這就是自定義規則了，name表示entry的name,如果entry的name是index，[name]就是index,[hash:5]是webpack打包過程中的獨一無二的辨別碼

loaders:出來js之外的東西

處理檔案

轉化為子產品：把檔案轉化為js可以認識子產品

例如：

module.exports={

module:{

rules:[

{

test:/\.css$/,

user:'css-loader'

}

]

}

}

可以看到這裡有一個對module.exports等于一個對象，然後對module的一個定義，一個rules數組，數組是對不同檔案的定義，test:/\.css$/,是對字尾為.css的檔案的定義，user是使用css-loader檔案

常用loader:

編譯相關：babel-loader、ts-loader

樣式相關：

style-loader、css-loader、less-loader、postcss-loader

檔案相關：

file-loader、url-loader

plugins:其他功能插件

參與打包整個過程

打包優化和壓縮

配置編譯時的變量

極其靈活

例如

const webpack=require('webpack');

module.exports={

plugins:[

new webpack.optimize.UglifyJsPlugin()

]

}

plugins下的數組是對plugins的使用

常用plugins

優化相關：CommonsChunkPlugin  UglifyjsWebpackPlugin

功能相關：ExtractTextWebpackPlugin  HtmlWebpackPlugin HotModuleReplacementPlugin  CopyWebpackPlugin

Chunk：代碼塊

bundle:已經被打包過後的

Module：子產品

轉載于:https://www.cnblogs.com/ellen-mylife/p/10622746.html