VUE3之WebPack Server

使用server可以在代码发生改变时，就能自动进行重新打包并展示。此外webpack的watch也能实现这个功能

WebPack watch

watch在webpack的依赖图中，只要有一个文件发生了改变，就会重新编译整个文件。

watch有两种打卡方式，一种是在执行webpack指令时加上选项–watch

  "scripts": {
    "build": "webpack --watch"
  },

还有一种做法是在webpack.config.js文件中将watch属性设置为true：

module.exports = {
    watch: true
}

webpack-dev-server

watch不具备即时刷新的功能，而webpack-dev-server可以live reloading。

安装：

npm install webpack-dev-server -D

添加脚本：

  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },

执行npm run serve后，可以访问localhost:8080端口访问，但是并不会将编译结果输出到文件中（只在内存里）。

contentBase

使用contentBase来替代CopyWebpackPlugin

之前是使用CopyWebpackPlugin来对public进行复制的，CopyWebpackPlugin会将public文件夹下的所有非index.html文件都复制到输出文件夹中，以防止资源找不到。使用contentBase可以达到同样的效果，即src中找不到的文件都会从contentBase文件夹中寻找。

module.exports = {
    devServer:{
        contentBase: "./public"
    },
}

在开发阶段中，使用contentBase可以减少文件复制造成的性能损失，但是在打包阶段，还是应该使用CopyWebpackPlugin来复制所有要用到的资源。

模块热替换

当某一个文件发生了修改时，模块热替换可以只修改这一个模块而不需要刷新整个页面。

开启HMR：

module.exports = {
    target: "web",

    devServer:{
        contentBase: "./public",
        hot: true
    },

}

并在main.js中指定哪些模块需要刷新：

if (module.hot) {
    module.hot.accept("./js/element.js",()=>{
        console.log("element模块发生更新！");
    })
}

而对于.vue文件，vue-loader已经默认开启了HMR的功能，不需要我们去手动开启了。

dev-server的其它简单配置

    devServer:{
        contentBase: "./public",
        hot: true,
        // 设置主机号
        // host: "0.0.0.0",
        // 设置端口号
        port: 7777,
        // 自动打开浏览器
        open: true,
        // 压缩
        compress: true
    },

proxy配置

proxy可以解决跨域访问的问题，比如从当前的服务器localhost:7777用axios发送一个请求给localhost:8888：

axios.get("/api/moment").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

可以通过设置代理来解决：

module.exports = {
        proxy: {
            "/api":{
                target:"http://localhost:8888",
                pathRewrite:{
                    "^/api": ""
                },
                // 默认不接收https，设置为false可以接收
                secure: false,
                // 改变header
                changeOrigin: true
            }
        }
    },
}

resolve配置

extensions配置表明哪些文件在引用的时候可以不用加上后缀名。

    resolve:{
        extensions:[".js",".json",".mjs",".vue",".ts",".jsx",".tsx"],
        alias:{
            "@": path.resolve(__dirname,"./src"),
            "js": path.resolve(__dirname,"./src/js")
        }
    },

alias为一个路径取一个别名，简化使用：

import App from '@/vue/app'

import "js/element";