webpack——webpack-dev-server

1.安装"webpack-dev-server"

npm install webpacke-dev-server --save-dev  

2."webpack-dev-server"在package.json中配置  

"script":{  

"dev":"webpack-dev-server"  

}  

3."webpack-dev-server"在webpack.config.js的配置  

devServer: {

//开发服务器的配置

    port:3000,

    progress:true,//打包进度条的显示

    contentBase:path.resolve(__dirname,'dist'),//将dist作为静态文件目录

    compress:true,

    open:true

}

"webpack-dev-server"属性解释  

(1) contentBase  ：指定服务器资源的根目录，如果不设置，默认是项目根目录，例如contentBase:"./dist",那么生产的文件都会放在dist目录下（npx webpack即webpackda打包和"webpack-dev-server"的区别：webpack打包生成js文件，真实的文件；"webpack-dev-server"不会输出js文件，仅仅出在内存中）

(2) port:设置服务的端口号

(3) host:服务器的主机号

(4) open:运行后自动打开浏览器

(5) compress:设置为true时对所有服务器资源采用gzip压缩方式（对js,css进行压缩，提高传输速率，优化前端性能）

(6) hot 和 inline：自动刷新和模块热替换机制

(7) filename:在惰性模式中，次选项可以减少编译。如果output的filename:"bundle.js",这里的lazy：true,filename:"bundle.js"