resolve.alias這個配置項相當(dāng)于為文件目錄配置一個別名
比如下面這樣的目錄結(jié)構(gòu)
要在main.js中使用jquery,需要這樣var $=require("./lib/jquery")蹂安。如果lib中的庫很多，而且目錄也很多锐帜，使用的時候就要寫一長串的地址田盈。
使用resolve.alias配置如下
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'
},
resolve:{
//配置別名，在項目中可縮減引用路徑
alias: {
jquery: "./lib/jquery"
}
},
plugins: [
]
};
使用的時候缴阎，這樣就可以var $=require("jquery");
配置項中允瞧，key值得配置方式也有很多種，更多的可以看這里
resolve.alias使我們不用頻繁地寫一長串的引用路徑蛮拔，但是使用的時候還是先要require述暂，如果我們懶到require都不想寫呢？ProvidePlugin這個插件就派上用場了建炫。
webpack.config.js
var webpack=require("webpack");
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'
},
resolve:{
//配置別名畦韭，在項目中可縮減引用路徑
alias: {
jquery: "./lib/jquery"
}
},
plugins: [
//提供全局的變量，在模塊中使用無需用require引入
new webpack.ProvidePlugin({
$: "jquery"
}),
]
};
因為已經(jīng)配置的別名肛跌，所以
new webpack.ProvidePlugin({ $: "jquery" })
就可以艺配，jquery就是我們配置的別名，如果沒有配置別名衍慎，則要這樣寫
new webpack.ProvidePlugin({ $: "./lib/jquery" })
使用的時候
var arr=[1,2,3,4];
$.each(arr,function(){
console.log(this);
});
沒毛病转唉，但是如果沒有配置ProvidePlugin，也沒有require,這樣寫webpack打包的時候是不會報錯的西饵，瀏覽器運行的時候才知道錯誤酝掩。
不管是使用resolve.alias還是ProvidePlugin，打包的時候眷柔，webpack都會將使用到的庫進(jìn)行打包期虾。打包的方式可以使用CommonsChunkPlugin這個插件再進(jìn)行配置（我以前的文章中有寫這個插件的詳細(xì)用法）。如果我們不想webpack打包某個文件驯嘱，而是直接在頁面使用script標(biāo)簽手動引入镶苞，或者使用CDN資源的時候，externals這個配置項就起作用了鞠评。
webpack.config.js
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'
},
externals: { $: "window.jQuery" },
plugins: [
]
};
使用
var $ = require("$");
var arr=[1,2,3,4];
$.each(arr,function(){
console.log(this);
});
一定要記得require,不然和不配置externals沒區(qū)別茂蚓，不想寫可以使用ProvidePlugin
externals: { $: "window.jQuery" },
plugins: [
//提供全局的變量，在模塊中使用無需用require引入
new webpack.ProvidePlugin({
$: "$"
})
]
打包后
然后頁面上通過script標(biāo)簽手動引入CDN地址或者本地文件地址就行了，需要注意的是引入的順序和依賴關(guān)系聋涨，將webpack打包的文件放到后面引入晾浴。
其實不使用externals也是可以的，我們看一下不使用externals牍白，直接這樣寫
var arr=[1,2,3,4];
$.each(arr,function(){
console.log(this);
});
打包后
當(dāng)我們手動引入JQ后脊凰，$肯定是有的，沒毛病茂腥。但始終感覺這樣會給自己挖坑狸涌。
