一、使用配置文件打包
1.新建webpack.config.js文件
2.配置入口 entry (所需打包的文件路徑)
3.配置出口output
(1)path:文件打包的存放路徑
(2)path.resolve():將路徑或者路徑片段的序列處理成絕對路徑
(3)__dirname:當前文件所在的目錄的絕對路徑 //注意__dirname這裏有兩個下劃線
(4)filename:打包後文件的名稱
配置代碼:
const path=require('path');
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.js'
}
}
將public文件夾下的index.js文件打包成build文件夾下的bundle.js文件
二、入口entry和出口output的進階用法
1.入口entry
(1)單入口
單文件 例如 entry:"./src/index.js"
多文件 例如 entry:["./src/index.js","./src/index2.js"...]
(2)多入口
例如 entry:{
pageOne:"./src/pageOne/index.js",
pageTwo:"./src/pageTwo/index.js"
}
2.出口output
(1)單出口
output:{
path:path.resolve(__dirname,"dist"),
filename:"bundle.js"
}
(2)多出口
output:{
path:path.resolve(__dirname,"dist"),
filename:"[name].js" //name對應多入口中的pageOne...
}