最近在学webpack时踩了很多坑
webpack-dev-server 开发服务器,为了方便我们开发,实时监测我们代码的改变,实时刷新页面。这样就不要一修改代码就重新运行了,大概是这个意思
配置开发服务器webpack-dev-server,
运行
npm install -D webpack-dev-server
在webpack.config.js中配置如下:
module.exports = {
devServer:{
//指定服务器目录
contentBase:'./dist',
//是否自动打开浏览器
open:true
}
}
接下来:通过dev-server来启动服务,需要在package.json中写npm的脚本
"scripts":{
"start":"webpack-dev-server"
}
我理解的是,这里的start是自己取的名字,之后我们如果要启动这个服务器,就可以输入
-npm run start
然后我在终端输入 npm run start,报错了:
大概意思是 contentBase这个属性无效的。
然后我查阅了官方文档,发现现在以及弃用了这个写法(中文文档不是最新版本,就很坑~~~)
改成了这样:
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
},
对 dist/
项目根目录中的所有内容进行 gzip 压缩和提供服务
成功解决了。。。。。