1. webpack學(xué)習(xí)之entry潮改，output
entry: {
vendor:['jquery'],
commons:["./common/util.a.js","./common/util.b.js"],
main:"./index.js"
},
output:{
filename:"./[name].[chunkhash:8].js", // path: __dirname + '/out',
publicPath: "" //靜態(tài)資源公共路徑
},
entry ： 可以設(shè)置為字符串狭郑，數(shù)組，或者對象汇在，作者在這里用常用的對象形式翰萨，main一般作為js入口文件，vendor一般放第三方庫和項目依賴糕殉，commons一般放一些util文件等亩鬼。
output ：entry設(shè)置幾個入口，這邊就會有幾個出口文件阿蝶，設(shè)置多個文件出口雳锋，可以后面加上hash，如果想輸出到不用文件夾赡磅，給entry的key加上文件夾名稱即可魄缚，例如：test/commons: [...]
2. webpack學(xué)習(xí)之插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
// 拷貝第三方j(luò)s庫到out文件夾下面
new CopyWebpackPlugin([
{
from: path.resolve(__dirname+'/src/external.js'),
to: './'
// ignore: [ '*.js' ] //忽略某一部分文件
}
]),
new ExtractTextPlugin({
filename: './index.[chunkhash:8].',
allChunks: true,
disable: false
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /index\.[a-z 0-9]{8}\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: false
}),
new CleanWebpackPlugin(['*'], {
root: __dirname + '/out',
verbose: true,
dry: false,
}),
new HtmlWebpackPlugin({
template: './index.html'
})
只是為了說明插件作用，上面代碼實例沒有順序焚廊，使用時如果順序有問題冶匹，可能會導(dǎo)致構(gòu)建報錯，插件的說明只是說了大概作用咆瘟，具體使用嚼隘，還是要到npm 具體了解。
ProvidePlugin ： webpack配置ProvidePlugin后袒餐，在使用時將不再需要import和require進(jìn)行引入飞蛹，直接使用即可。比如： $('.text').text('測試')
CopyWebpackPlugin ： 講一個文件直接拷貝到某個位置灸眼，比如講第三方sdk 或者 某些流量檢測文件直接拷貝到項目中使用卧檐。
HotModuleReplacementPlugin： 熱部署插件，文件改變后焰宣，瀏覽器會自動刷新
NamedModulesPlugin ：這個插件的作用是在熱加載時直接返回更新文件名霉囚，而不是文件的id。
ExtractTextPlugin ： 該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現(xiàn)象匕积。
HtmlWebpackPlugin：一盈罐、為html文件中引入的外部資源如script、link動態(tài)添加每次compile后的hash闪唆，防止引用緩存的外部文件問題盅粪。二、可以生成創(chuàng)建html入口文件悄蕾，比如單頁面可以生成一個html文件入口票顾，配置N個html-webpack-plugin可以生成N個頁面入口。
OptimizeCSSAssetsPlugin ：匹配到out文件夾中css進(jìn)行壓縮。
CleanWebpackPlugin ： //每次構(gòu)建之前库物，都將上一次構(gòu)建的文件夾刪除霸旗，再生成新的。
3. webpack之optimization
optimization: {
//common 插件
splitChunks:{
chunks: "all",//同時分割同步和異步代碼,推薦戚揭。
minSize: 0,
minChunks: 1, //最小引入次數(shù)
maxAsyncRequests: 5, //按需加載最大請求次數(shù)為5的所有模塊就行拆分到一個單獨的代碼塊中
maxInitialRequests: 3, //初始化加載最大請求次數(shù)為3的所有模塊就行拆分到一個單獨的代碼塊中
name: true,
//緩存組诱告，將多次引用的模塊test 緩存到
cacheGroups:{
// 開發(fā)模式下，緩存jquery等第三方庫民晒。
// jquery:{
// test:'jquery', //要寫test設(shè)置項精居，不然會打包工程下所有的js文件
// chunks:'initial',
// name:'jquery',
// enforce:true
// }
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
// 生產(chǎn)模式下，打包entry的代碼潜必。
//打包重復(fù)使用的代碼靴姿，//打包第三方類庫
vendor: {
name: 'vendor',
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
},
commons: {
name: "commons",
chunks: "initial",
minChunks: Infinity
}
}
}
},
這里就不多贅述了，關(guān)鍵解釋在上面代碼實例中
4. webpack之devServer
devServer: {
contentBase: path.join(__dirname, ""), //注意這邊路徑不要寫太詳細(xì)磁滚，會導(dǎo)致部分文件重新構(gòu)建佛吓，頁面不刷新
watchContentBase: true,
//因為熱更新使用的是內(nèi)存 默認(rèn)資源是保存在內(nèi)存中的 需要使用publishpath制定相對路徑
port: 8077,
hot: true, //熱更新
hotOnly: false,
inline: true,
historyApiFallback: true, //跳轉(zhuǎn)頁面
openPage: './index.html', //默認(rèn)打開的頁面
open: true, //自動打開頁面,
clientLogLevel: "none", //阻止打印那種搞亂七八糟的控制臺信息
allowedHosts:[], //允許訪問的服務(wù)器
proxy: {
'/api': 'http://localhost:3000' //ajax 訪問代理
},
watchOptions: {
poll: true
}
}
關(guān)鍵解釋在上面代碼實例中
代碼在github上多矮，需要的同學(xué)耙册，可以clone到本地學(xué)習(xí)竭缝，還有多頁面打包方法在github上渠羞，感興趣的可以去看看。
本文作者原創(chuàng)秸侣，僅供學(xué)習(xí)交流使用赤屋，轉(zhuǎn)載需注明出處园骆。
