如果我想调试的话,不可能每一次都打webpack,打个包,然后打开demo再去看效果吧,所以就有了 webpack-dev-server 这个东西
简介
想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖
安装
和webpack一样
//全局安装webpack-dev-server
cnpm install -g webpack-dev-server
//安装到你的项目目录
cnpm install --save-dev webpack-dev-server
配置
修改目录下的webpack.config.js文件,另存为webpack.dev.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/home.js", //入口文件
output: {
path: __dirname + "/demo/build", //输出目录
publicPath:'/build/',//包热更新的地址
filename: "home.js" //输出的文件名
},
devServer: {
contentBase: __dirname + "/demo", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
开启
我们可以在package.json的script中添加一个新的命令dev
"scripts": {
"test": "test",
"start": "webpack",
"dev": "webpack-dev-server --config webpack.dev.js --open"
}
之后运行,就会打开一个网页,当你保存你所写的代码的时候,网页就会自动刷新
npm run dev
文章评论