-
目录
捕获.JPG - 让文件改动时webpack自动打包
- package.json scripts添加
"webpackwatch": "webpack --watch",
npm run webpackwatch
- 使用devserver开启服务
- package.json scripts添加
"dev": "webpack-dev-server"
npm run dev
webpack.config.js配置
devServer:{
contentBase:'./dist', //script webpack-dev-server 服务的根路径
open:true,//自动打开浏览器,
hot:true
},
- 配置hmr
开启时当html开发时只更改样式 js进行的操作数据不会丢失，浏览器只会局部刷新样式- webpack.config.js
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const {CleanWebpackPlugin}= require('clean-webpack-plugin') const webpack = require('webpack'); devServer:{ contentBase:'./dist', //script webpack-dev-server open:true,//自动打开浏览器, hot:true, }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin( { title:'learnWebpack', filename:'index.html', template:'./index.html' } ), new webpack.HotModuleReplacementPlugin(), ]
- webpack.config.js
- 代理
发送ajax请求时，如果匹配则会转发，可以代理跨域
devServer:{
contentBase:'./dist', //script webpack-dev-server
open:true,//自动打开浏览器,
hot:true,
// hotOnly:true,//hmr
proxy:{
'/api':"localhost:3000", //如果请求 /api/login 则会加上localhost:3000/api/login
changeOrigin: true,//跨域
}
// proxy: {
// '/api': {
// target: 'http://localhost:3000',
// pathRewrite: {'^/api' : 'redict'}
// } 发送 localhost:3000/redict/login
// }
// proxy: [{
// context: ['/auth', '/api'],
// target: 'http://localhost:3000',也可以这样匹配多个
// }]
},
