一、使用配置文件打包
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...
}