本文章主要針對(duì)使用webpack進(jìn)行本地運(yùn)行或者打包進(jìn)行不同配置進(jìn)行解釋楷掉,
首先焕参,看看我們之前的package.json的scripts配置
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline --hot"
}
這里我們運(yùn)行webpack的時(shí)候是沒(méi)區(qū)分是否打包的,所以我們得加入一個(gè)參數(shù)給予識(shí)別
"scripts": {
"build": "set OWNNER_ENV=production&&webpack",
"dev": "webpack-dev-server --inline --hot"
},
這樣齿梁,我們?cè)趙ebpack.config.js可以通過(guò)node環(huán)境變量獲却咧病:
process.env.OWNNER_ENV
配合環(huán)境變量我們可以對(duì)輸出目錄進(jìn)行控制:
var myEnv = process.env.OWNNER_ENV;
var outPutJson;
if(myEnv=='production'){
outPutJson={
publicPath:"./projectOutput/",//本地資源訪問(wèn)目錄,也可以設(shè)成絕對(duì)路徑
path: __dirname+"/projectOutput/",//生成文件存放地址勺择,熱啟動(dòng)資源訪問(wèn)目錄创南,必須絕對(duì)路徑
filename: "[name].js"
}
}else{
outPutJson={
path: __dirname+"/initProject/",//生成文件存放地址,熱啟動(dòng)資源訪問(wèn)目錄省核,必須絕對(duì)路徑
filename: "[name].js"
}
}
module.exports= {
...
output: outPutJson,
...
module:{
rules:[
...
{
test:/\.(jpg|png|gif)$/,
use:['url-loader?limit=1111&name=images/[name].[ext]'], //limit:限制多少b一下圖片進(jìn)行base64轉(zhuǎn)碼稿辙,name:輸出目錄以及文件名
exclude: /node_modules/
},
...
]
}
這里解釋下path和pubilcPath的區(qū)別,path是開(kāi)啟本地服務(wù)(熱啟動(dòng))時(shí)本地資源的暫時(shí)存放目錄气忠,而publicPath是打包時(shí)項(xiàng)目資源的存放地址
所以這樣我們就可以根據(jù)自己的操作進(jìn)行打包或者啟動(dòng)了邻储。