webpack

137 阅读1分钟

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,{//新增配置})