## webpack-dev-server ##
webpack-dev-server是nodejs的一个插件,可以在本地起动web服务,可以做反向代理。
package.json 命令
"scripts": {
"dev": "webpack-dev-server --config webpack.prod.conf.js",
//webpack.prod.conf.js自己定义的文件
"build":" ",
"test": ""
}
项目目目录结构
-------
webpack
--build
--dist
index.html
404.html
--node_modules
--src
css
img
js
index.js
package.json
package-lock.json
webpack.prod.conf.js
webpack.prod.conf.js 文件
-----------------------
module.exports = {
mode:"development",
entry:{
app:path.resolve(__dirname,'./src/js/main.js')
},
output:{
filename:'bundle.js',
path:path.resolve(__dirname,"build"),
publicPath:"/assets/",//也可为cdn地址:https://www.xxx.com/static
//这里的值必须加在index.html的script的src中,
//本index.html中<script src="assets/bundle.js"></script>,
//这里的assets必须与publicPath一致。
},
module: {
rules: [
{
test:/\.js/,
use:[
'babel-loader'
]
}
]
},
devtool:'inline-source-map',
devServer:{
contentBase:path.resolve(__dirname,"dist/"),
//它的目录指向你的index.html所在目录
host:'localhost',
port:'8888',
compress:true,
historyApiFallback: {
rewrites: [
{ from: /^\/q/, to: '404.html' },
]
},
//historyApiFallback:true找不到页面跳到index.html,
//这里是在localhost:8888/qxxxx页面,会跳到404.html
// lazy: true,//这里lazy设置为true,devServer就不起作用
hot:true,
//hotOnly:true,//设置为true不自动刷新
watchOptions: {
aggregateTimeout: 2000,//延迟几秒,1000为1秒
poll: 1000,//多少时间轮询一次
},
open:true,//设置为true打开默认浏览器
// publicPath: "/assets/"作用跟output中publicPath一样
proxy: {
"/api": {
target: "http://www.xxx.com/api/",
pathRewrite: {"^/api" : "'/'"}//接口调用axios.get("/api/xxxx")
}
}
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
浏览器实时刷新配置
------
hot:true,
plugins: [
new webpack.HotModuleReplacementPlugin()
]