webpack devServer配置项的坑

Posted 2020-11-22 你看得到我？

本文所用webpack版本为4+，阅读本章的同学请注意区分。

  webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配置

 本人的苦逼经历觉得这句话还是挺重要的，所以开局先一句话，

本章主要介绍webpack 的devserver配置项，请根据自身判断是否需要继续阅读

上代码

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
        publicPath: "./",//为什么把这个字段列出来呢，下面会有解释
    },
    devServer: {
        contentBase: ‘/index.html‘,//设置服务构建的资源来自于那个文件夹则默认为 这个项目使用源文件（没有打包过的文件，非dist）来开启服务，如果指定打包后的文件开启服务，则需要用publicPath

        publicPath: "",//设置服务构建的资原来自那个目录，必须设置，不然无法访问 其原因是在开始服务的时候 我的命令是 npm run start 会进行一次打包，
        //打包后资源输出的地方是在内存里面，你通过http://127.0.0.1:8081/dist（启动服务后会出现地址） 是访问不到的，只有在这里指定 其实你更可以把这里理解为，在服务启动时打包的文件输出的地点，并将开启服务所需要的资源
         地址指定 例如 你指定的是/dist 那么你访问地址就是http://127.0.0.1:8081/dist  指定为/ 访问地址就是 http://127.0.0.1:8081/

        //...
        //本项中上面两项配置是有坑的，特别是对新手来说，而且他的配置，大体上通过翻阅webpack配置文旦就可里顺利的调用，所以就不再叙述
        //devserver中还有很多配置选项，想要详细了解可以访问https://www.webpackjs.com/configuration/dev-server/#devserver-host
    }
}