Vue学习笔记-webpack自定义打包入口及出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口
通过output节点指定打包的出口

const path = require('path')
//导入模块 模块提供了用于处理文件和目录的路径的实用工具
// entry:'指定要处理的哪个文件'
    // entry:path.join(__dirname 此处为本文件当前目录,'此处填处理文件的路径')

    // output:{
    //     存放的目录 默认为dist
    //     path:'',
    //     生成的的文件名 默认为main.js
    //     filename:'',
    // }

优化图片及JS的存放路径
1.JS文件在filename中将路径写入即可

filename:'js/main.js'

2.图片文件
修改webpack.config.js的url-loader配置项
新增outputPath选项指定图片文件的输出路径

{test:/\.jpg|png|gif$/,
use:{
loader:'url-loader',
options:{
limit:22228,
//明确指定把打包生成的图片文件存到dist目录下的image文件夹中
outputPath:'image'},
},
}

更简单的写法就是在url-loader有多个参数的时候参数之间用&符号进行分割
//{test:/.jpg|png|gif$/,use: 'url-loader?limit=500&outputPath=images'},
//这里用插件篇做个例子详情插件篇src赋值
//limit为第一个参数outputPath为第二个参数

注:
//重新打包前可将原来生成的dist文件夹删除自动清理详见插件篇