webpack使用总结

1、path.resolve()

path.resolve([...paths]) 方法将参数里面的路径片段解析为一个绝对路径。

该方法往参数里面传入几个路径片段,返回的路径是相当于在当前目录下,从左到右依次对路径片段进行 cd 操作。

具体参考:https://blog.csdn.net/kikyou_csdn/article/details/83150538

path.resolve(__dirname,[...paths]) 中的 dirname 指的是被执行文件所在目录的绝对路径。 

2、output选项中的publicPath

当你开发一个项目,使用 npm run dev,可以直接在浏览器上看到本地显示的效果。但是当你使用npm run build,然后把打包生成的文件夹 dist 放在服务器上时访问时,你会发现出错,此时浏览器中访问静态文件的地址有误。output 选项中的 publicPath 就是为了设置访问静态文件的路径,系统会用 publicPath 中的路径加上 output 中 path 的路径作为静态文件的路径进行访问。

要想正确访问到静态文件,必须修改 publicPath 的值。但是有一个非常奇怪的现象,用 vue-cli 初始的项目,当你修改了生产环境的配置文件的 publicPath 的值过后,使用 npm run dev 运行项目可能会报错,因为 vue-cli 运行开发环境可能也用到了生产环境的配置文件下的 publicPath 的值。

参考:http://www.imooc.com/wenda/detail/439569、  https://blog.csdn.net/qq_39207948/article/details/80631435

原文地址:https://www.cnblogs.com/wenxuehai/p/11117553.html