[b]前言[/b] Webpack2 中有很多涉及路径参数配置，若不知其所以然，很容易混淆出错。本文尽可能的汇集了 Webpack2 中涉及路径的配置，力争深入浅出。 [b]context[/b] context 是 webpack 编译时的基础目录，入口起点（entry）会相对于此目录查找。 默认值为当前目录，webpack设置 context 默认值[url=https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js#L16]代码[/url] 可以[url=http://xiazai.jb51.net/201706/yuanma/WebpackOptionsDefaulter(jb51.net).rar]本地下载[/url]： [code]process.cwd()[/code]即webpack运行所在的目录（等同package.json所在目录）。 context 应该配置为绝对路径，假如入口起点为src/main.js，则可以配置： 此时 entry 不能再配置为'./src/main.js'，因为 webpack 会相对于 context 配置的 src 目录区查找入口起点（main.js），而 main.js 就在此目录下，所以应当将 entry 配置为当前目录（./）。 context 有什么实际作用？官方文档的解释是使得你的配置独立于工程目录 「This makes your configuration independent from CWD (current working directory)」。怎么理解？举个例子，在分离开发生产配置文件时候，一般把 webpack.config 放到 build 文件夹下，此时 entry 却不用考虑相对于 build 目录来配置，仍然要相对于 context 来配置，这也就是所谓的独立于工程目录。 需要注意的是，output 的配置项和 context 没有关系，但是有些插件的配置项和 context 有关，后面会说明。 [b]output[/b] [b]output.path[/b] 打包文件输出的目录，建议配置为绝对路径（相对路径不会报错），默认值和 context 的默认值一样，都是[code]process.cwd()[/code]。 除了常规的配置方式，还可以在 path 中用使用 [hash] 模板，比如配置： 打包后的目录如下： [img]http://files.jb51.net/file_images/article/201706/2017617114748684.png?2017517114756[/img] 这里的 hash 值是编译过程的 hash，如果被打包进来的内容改变了，那么 hash 值也会发生改变。这个可以用于版本回滚。你也可以配置为[code]path.resolve(`./dist/${Date.now()}/`)[/code]方便做持续集成等。 [b]ouput.publicPath[/b] 记得最开始学习 Webpack 的时候，一直没把 publiPath 理解透彻，甚至还错误的认为它和 [code]output.path [/code]有关联。这个配置项在很多场景是非常重要的，如果不深入理解，就不能灵活运用。 怎么快速又准确的理解 publicPath，我觉得可以用下面的这个公式来表述： 静态资源最终访问路径 = [code]output.publicPath[/code] + 资源loader或插件等配置路径 举例说明： publicPath 默认值为空字符串，接下来看其他各种常见的 publicPath 配置的实际意义。 publicPath 设为相对路径，相对路径实际上是相对于index.html的路径，为什么这么说？比如[code]publicPath:"./dist/"[/code] ，JS文件名为bundle.js，按上面的公式，最终访问JS的路径为./dist/bundle.js， 这个路径同时也是index.html引用bundle.js的路径，既然要在index.html通过相对路径引用bundle.js，那么index.html的位置就决定了 publicPath 的配置，比如index.html在A文件夹下，而发布的路径不想放到A文件夹里，而是想和A文件夹同级，那么就应配置为[code]publicPath :"../dist/"[/code] ，这就是相对于index.html的路径来讲，bundle.js在上一层的dist文件夹里。相对路径的好处是本地可以访问，比如一些混合 APP 用的file协议，用绝对路径肯定是不行的。 publicPath 设为相对于协议url（//）或http地址（http://），比如[code]publicPath:'http://wwww.qinshenxue.com/static/'[/code] ，开发环境当然是不能这么干，使用这个的场景是将资源托管到CDN，比如公司的静态资源服务器等。 另外publicPath应该以'/'结尾，同时其他loader或插件的配置不要以'/'开头。 [b]webpack-dev-server[/b] [b]publicPath[/b] 上面讲过 webpack 的 publicPath，那么这里的 publicPath 和 上面的publicPath是不是一回事呢？答案是两者区别很大，首先这里的publicPath用于开发环境的，因此不会出现配置 http 地址的情况，那这两者到底有啥区别呢？ 我们知道 webpack-dev-server 打包的内容是放在内存中，通过express匹配请求路径，然后读取对应的资源输出。这些资源对外的根目录就是publicPath，可以理解为和 outpu.path 的功能一样，将所有资源放在此目录下，在浏览器可以直接访问此目录下的资源。 但是这个路径仅仅只是为了提供浏览器访问打包资源的功能，webpack中的loader和插件仍然是取[code]ouput.publicPath[/code]，比如CSS里面的图片最终的路径仍是"/static/img/xxxx.png"，这也是为什么官方推荐 publicPath 和 webpack 配置的保持一致（除了http地址），配置一致才能正常访问其他静态资源。 上面的解释可能还是比较生硬，还是举几个例子来说明： 本例将两处 publicPath 配置成不一样的，这样更容易对比理解。 如何查看 webpack-dev-server 所有启动后的资源访问路径呢？有个简单的方法，就是访问/webpack-dev-server，本例访问截图如下： [img]http://files.jb51.net/file_images/article/201706/2017617114907979.png?2017517114914[/img] 上面的资源可以点击查看，你会发现，资源的路径都是/web/*****，所以在index.html中引入JS的路径应为/web/js/main.js，同时也能看到，style.css中的图片路径仍然为/static/img/****.png，而不是/web/。 [b]html-webpack-plugin[/b] 这个插件的几处配置受路径配置影响，因此需要专门说明下。 [b]template[/b] template的路径是相对于 [code]output.context[/code]，源码如下： 因此 template 对应的文件需要放在 [code]ouput.context [/code]配置的目录下才能被识别。 [b]filename[/b] filename的路径是相对于 [code]output.path[/code]，源码如下： 在 webpack-dev-server 中，则相对于 webpack-dev-server 配置的 publicPath。 若 webpack-dev-server 中的 publicPath 和 [code]ouput.publicPath[/code] 不一致，在这种配置下使用html-webpack-plugin是有如下问题： [list] [*]自动引用的路径仍然以 [code]ouput.publicPath[/code] 为准，和 webpack-dev-server 提供的资源访问路径不一致，从而不能正常访问；[/*] [*]浏览 index.html 需要加上 webpack-dev-server 配置的 publicPath 才能访问（http://localhost:8282/web/）。 [/*] [/list] 这两个问题也反推出了最方便的配置为： [list] [*]ouput.publicPath 和 webpack-dev-server 的publicPath 均配置为'/'，vue-cli 就是这种配置[/*] [*]template 放在根目录，html-webpack-plugin 不用修改参数的路径，filename 采用默认值。[/*] [/list] [b]总结[/b] 目前就针对上面基础路径做了简单的解释说明，如有错误，请不吝指出，后续若发现其他相关路径配置，再作补充。 好了，以上就是这文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对编程素材网的支持。