webpack基本配置

webpack页面代码，基础配置
// 引用部分
const path = require('path)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

// 模块部分
模块配置 module.exports = {}包含以下部分
mode：打包模式（测试，生产，开发等）。
entry:path.resolve(_dirname,‘src’,index.js)。打包入口
output:{
path:path.resolve(_dirname,‘dist’) 文件
filename:‘bundle.js’ 文件名
}
devserve：{本地服务启动配置
port:4000 // 设置服务启动端口
open:true // 设置服务启动时是否 自动打开浏览器
cors:true // 允许跨域
poxy：{ 服务代理
‘./api’:{ // api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
target: ‘http://xxx/api’ ‘目标当前网址’
changeOrigin:true // 是否跨域
ws:true // 是否启用websocket 协议
rewite:(path) =>{
path.replace(‘./api’, ‘’) 重写匹配的字段，如果不需要放在请求路径上，可以重写为""
}
}
}
}
module：{// 扩展部分，css、字体、等各种编译
rules:[// 可以加载多种文件，每种文件对应一种loader,所以是数组
{
// 正则判断文件类型
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 41: …,css-loader] }̲, // 判断less文件…/i,
use:[ “style-loader”,“css-loader”,“less-loader”]
},
]
}
// 插件配置
plugins:[
// vue(),
// 传入配置参数
new HtmlWebpackPlugin({
//js插入位置
inject: ‘body’
// 生成的HTML文件名
filename:index.html
// 指定参照这个html文件进程生成
template: path.resolve(_dirname, ‘./public/index.html’)
}),
],