vue3+ts学习（十一）：webpack热编译开启方式及配置

webpack热编译开启方式：

1.watch方式(用的比较少,不使用live server无法实时更新页面)

//package.json 
//通过webpack-cli将watch配置改为true 
"scripts": { "build": "webpack --watch"}, 
     
//也可自己直接配置webpack.config.js 
module.exports = { 
    // ... 
    watch:true, 
}

2.webpack-dev-server:配置指令,并不会输出任何文件，打包后的静态资源只保留在内存里

npm install -D webpack-dev-server

//package.json 
"scripts": { 
    "build": "webpack" 
    "serve": "webpack serve" //直接npm run serve 
    },
    
//webpack.config.js 
module.exports = { 
    // ... 
    target: "web", //被什么环境打包的，与hot连用
    devServer:{ 
        //找不到该资源会从该目录下找,默认就是从public下找,开发阶段使用，打包阶段还是用CopyWebpackPlugin 
        static:"./public",
        hot: true,   //模块热替换启动
        // host: "0.0.0.0",
        port: 1234, // 服务端口号
        open: true, // 服务启动是否打开浏览器
        compress: true,  // 资源是否使用gzip压缩
    },
}