1,package,json中scripts下对应各个模式的启动方式
2, webpack.base.conf.js公共打包配置
entry:{}//入口文件
output:{
path:'',导出文件的绝对路径
filename:'',导出文件文件名
publicPath:'',为所有资源指定的基本路径,一般情况下publicPath应该以'/'结尾,而其他loader或插件的配置不要以'/'开头;后面可以根据是生产环境还是开发环境更换基本路径
}//出口文件
resolve:{
extensions : [".js", ".vue", ".json"],//import 导入时可以不引入后缀名
alias : {//起别名,可以用一个名称代替一段路径
"vue" : "vue/dist/vue.js",
"@": resolve("src"),
"common": resolve("src/common"),
"components": resolve("src/components")
}
}//设置模块如何被解析
module:{
rules:[
{//对于匹配成功的模块所作的配置
test: /\.vue$/, // vue 文件后缀的
loader: 'vue-loader', // 使用vue-loader处理
options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码
},]
}//模块解析
plugins:[
{}]//webpacks打包过程中的扩展器,针对于webpack打包的整个流程,不直接操作文件,对webpack执行过程中的某个节点,执行广泛的任务,通常在使用之前需要引入。
3,webpack.merge合并
常常需要针对不同的环境进行不同的打包操作
比如:开发环境下需要进行代理,生产环境下需要将css单独生成一个文件并对代码进行压缩;因此可以使用webpack.merge()将不同环境下新增配置和基础配置结合起来
merge(base,{//新增配置})