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ù)組，或者對(duì)象，作者在這里用常用的對(duì)象形式，main一般作為js入口文件，vendor一般放第三方庫(kù)和項(xiàng)目依賴，commons一般放一些util文件等。
output ：entry設(shè)置幾個(gè)入口，這邊就會(huì)有幾個(gè)出口文件，設(shè)置多個(gè)文件出口，可以后面加上hash，如果想輸出到不用文件夾，給entry的key加上文件夾名稱即可，例如：test/commons: [...]
2. webpack學(xué)習(xí)之插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
// 拷貝第三方j(luò)s庫(kù)到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'
})
只是為了說(shuō)明插件作用，上面代碼實(shí)例沒(méi)有順序，使用時(shí)如果順序有問(wèn)題，可能會(huì)導(dǎo)致構(gòu)建報(bào)錯(cuò)，插件的說(shuō)明只是說(shuō)了大概作用，具體使用，還是要到npm 具體了解。
ProvidePlugin ： webpack配置ProvidePlugin后，在使用時(shí)將不再需要import和require進(jìn)行引入，直接使用即可。比如： $('.text').text('測(cè)試')
CopyWebpackPlugin ： 講一個(gè)文件直接拷貝到某個(gè)位置，比如講第三方sdk 或者 某些流量檢測(cè)文件直接拷貝到項(xiàng)目中使用。
HotModuleReplacementPlugin： 熱部署插件，文件改變后，瀏覽器會(huì)自動(dòng)刷新
NamedModulesPlugin ：這個(gè)插件的作用是在熱加載時(shí)直接返回更新文件名，而不是文件的id。
ExtractTextPlugin ： 該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁(yè)面樣式加載錯(cuò)亂的現(xiàn)象。
HtmlWebpackPlugin：一、為html文件中引入的外部資源如script、link動(dòng)態(tài)添加每次compile后的hash，防止引用緩存的外部文件問(wèn)題。二、可以生成創(chuàng)建html入口文件，比如單頁(yè)面可以生成一個(gè)html文件入口，配置N個(gè)html-webpack-plugin可以生成N個(gè)頁(yè)面入口。
OptimizeCSSAssetsPlugin ：匹配到out文件夾中css進(jìn)行壓縮。
CleanWebpackPlugin ： //每次構(gòu)建之前，都將上一次構(gòu)建的文件夾刪除，再生成新的。
3. webpack之optimization
optimization: {
//common 插件
splitChunks:{
chunks: "all",//同時(shí)分割同步和異步代碼,推薦。
minSize: 0,
minChunks: 1, //最小引入次數(shù)
maxAsyncRequests: 5, //按需加載最大請(qǐng)求次數(shù)為5的所有模塊就行拆分到一個(gè)單獨(dú)的代碼塊中
maxInitialRequests: 3, //初始化加載最大請(qǐng)求次數(shù)為3的所有模塊就行拆分到一個(gè)單獨(dú)的代碼塊中
name: true,
//緩存組，將多次引用的模塊test 緩存到
cacheGroups:{
// 開(kāi)發(fā)模式下，緩存jquery等第三方庫(kù)。
// jquery:{
// test:'jquery', //要寫(xiě)test設(shè)置項(xiàng)，不然會(huì)打包工程下所有的js文件
// chunks:'initial',
// name:'jquery',
// enforce:true
// }
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
// 生產(chǎn)模式下，打包entry的代碼。
//打包重復(fù)使用的代碼，//打包第三方類庫(kù)
vendor: {
name: 'vendor',
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
},
commons: {
name: "commons",
chunks: "initial",
minChunks: Infinity
}
}
}
},
這里就不多贅述了，關(guān)鍵解釋在上面代碼實(shí)例中
4. webpack之devServer
devServer: {
contentBase: path.join(__dirname, ""), //注意這邊路徑不要寫(xiě)太詳細(xì)，會(huì)導(dǎo)致部分文件重新構(gòu)建，頁(yè)面不刷新
watchContentBase: true,
//因?yàn)闊岣率褂玫氖莾?nèi)存 默認(rèn)資源是保存在內(nèi)存中的 需要使用publishpath制定相對(duì)路徑
port: 8077,
hot: true, //熱更新
hotOnly: false,
inline: true,
historyApiFallback: true, //跳轉(zhuǎn)頁(yè)面
openPage: './index.html', //默認(rèn)打開(kāi)的頁(yè)面
open: true, //自動(dòng)打開(kāi)頁(yè)面,
clientLogLevel: "none", //阻止打印那種搞亂七八糟的控制臺(tái)信息
allowedHosts:[], //允許訪問(wèn)的服務(wù)器
proxy: {
'/api': 'http://localhost:3000' //ajax 訪問(wèn)代理
},
watchOptions: {
poll: true
}
}
關(guān)鍵解釋在上面代碼實(shí)例中
代碼在github上，需要的同學(xué)，可以clone到本地學(xué)習(xí)，還有多頁(yè)面打包方法在github上，感興趣的可以去看看。
本文作者原創(chuàng)，僅供學(xué)習(xí)交流使用，轉(zhuǎn)載需注明出處。
