乐趣区

关于javascript:开发服务器devServer配置webpack

devServer 为咱们提供了开发过程中的服务器,是一个应用了 express 的 HTTP 服务器,它的次要作用是为了监听资源文件的扭转,该 http 服务器和 client 应用了 websocket 通信协议,只有资源文件产生扭转,webpack-dev-server 就会实时的进行编译。
需下载 webpack-dev-server 包
1、装置

npm i webpack-dev-server -D

2、webpack5 需在 webpack.config.js 中增加 target 属性,实现主动刷新

module.exports = {
    entry: 'xxx',
    output: 'xxx',
    module: {...},
    plugins: [],
    target: 'web',
    mode: 'xxx',
}

3、启动:在命令行中输出 webpack serve 启动,也可在 package.json 中 scripts 参数后指定命令

"scripts":{
    "dev": "webpack serve --mode development",  /* 执行 npm run dev 开启 devServer,并设置打包模式为开发模式 */
    "bulid": "webpack --mode production" /* 执行 npm run bulid 以生产模式打包 */
}

4、配置参数:在 webpack.config.js 中增加 devSever

devSever: {
    port: 8080,  /* 指定端口号 */
    compress: true,/* 开启主动压缩 */
    open: true /* 主动开启浏览器 */
}
退出移动版