Webpack의 관련 경로 구성에 대한 자세한 설명

이 글은 주로 Webpack2의 경로 구성에 대한 관련 정보를 소개합니다. 글의 소개는 매우 자세하며 필요한 모든 사람을 위한 특정 참고 자료와 학습 가치가 있습니다.

서문

Webpack2에는 많은 경로 매개변수 구성이 포함되어 있습니다. 이유를 모르면 혼동되고 실수하기 쉽습니다. 본 글에서는 Webpack2에 관련된 경로 구성을 최대한 모아서, 알기 쉽게 설명하려고 노력했습니다.

context

context는 webpack이 컴파일될 때 기본 디렉터리이며, 이 디렉터리를 기준으로 진입점(entry)을 검색하게 됩니다.

기본값은 현재 디렉터리입니다. webpack 설정 컨텍스트 기본값 코드는 로컬로 다운로드할 수 있습니다.

this.set("context", process.cwd());

process.cwd()는 webpack이 실행되는 디렉터리입니다(동일). package.json이 있는 디렉터리). process.cwd()即webpack运行所在的目录（等同package.json所在目录）。

context 应该配置为绝对路径，假如入口起点为src/main.js，则可以配置：

{
 context: path.resolve('./src'),
 entry: './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 有关，后面会说明。

output

output.path

打包文件输出的目录，建议配置为绝对路径（相对路径不会报错），默认值和 context 的默认值一样，都是process.cwd()。

除了常规的配置方式，还可以在 path 中用使用 [hash] 模板，比如配置：

output: {
 path: path.resolve('./dist/[hash:8]/'),
 filename: '[name].js'
}

打包后的目录如下：

这里的 hash 值是编译过程的 hash，如果被打包进来的内容改变了，那么 hash 值也会发生改变。这个可以用于版本回滚。你也可以配置为path.resolve(`./dist/${Date.now()}/`)方便做持续集成等。

ouput.publicPath

记得最开始学习 Webpack 的时候，一直没把 publiPath 理解透彻，甚至还错误的认为它和 output.path 有关联。这个配置项在很多场景是非常重要的，如果不深入理解，就不能灵活运用。

怎么快速又准确的理解 publicPath，我觉得可以用下面的这个公式来表述：

静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

举例说明：

output.publicPath = '/static/'

// 图片 url-loader 配置
{
 name: 'img/[name].[ext]'
}
// 那么图片最终的访问路径为
output.publicPath + 'img/[name].[ext]' = '/static/img/[name].[ext]'

// JS output.filename 配置
{
 filename: 'js/[name].js'
}
// 那么JS最终访问路径为 
output.publicPath + 'js/[name].js' = '/static/js/[name].js'

// CSS 
new ExtractTextPlugin("css/style.css")
// 那么最终CSS的访问路径为
output.publicPath + 'css/style.css' = '/static/css/style.css'

publicPath 默认值为空字符串，接下来看其他各种常见的 publicPath 配置的实际意义。

publicPath 设为相对路径，相对路径实际上是相对于index.html的路径，为什么这么说？比如publicPath:"./dist/" ，JS文件名为bundle.js，按上面的公式，最终访问JS的路径为./dist/bundle.js， 这个路径同时也是index.html引用bundle.js的路径，既然要在index.html通过相对路径引用bundle.js，那么index.html的位置就决定了 publicPath 的配置，比如index.html在A文件夹下，而发布的路径不想放到A文件夹里，而是想和A文件夹同级，那么就应配置为publicPath :"../dist/" ，这就是相对于index.html的路径来讲，bundle.js在上一层的dist文件夹里。相对路径的好处是本地可以访问，比如一些混合 APP 用的file协议，用绝对路径肯定是不行的。

publicPath 设为相对于协议url（//）或http地址（http://），比如publicPath:'http://wwww.qinshenxue.com/static/'

컨텍스트는 절대 경로로 구성되어야 합니다. 항목 시작점이 src/main.js인 경우 다음을 구성할 수 있습니다.

// webpack.config.js
output: {
 path: path.resolve(`./dist/`),
 filename: 'js/[name].js',
 publicPath: '/static/'
}

이때 항목은 더 이상 './src/'로 구성할 수 없습니다. main.js', webpack은 상대적이기 때문에 컨텍스트에 구성된 src 디렉터리 영역에서 항목 시작점(main.js)을 찾고, 이 디렉터리에 main.js가 있으므로 항목은 현재 디렉터리(./ ). 컨텍스트는 실제로 무엇을 합니까? 공식 문서에서는 이렇게 하면 구성이 CWD(현재 작업 디렉터리)와 독립적이게 된다고 설명합니다. 이해하는 방법? 예를 들어 구성 파일을 별도로 개발하고 제작하는 경우 webpack.config는 일반적으로 Under에 배치됩니다. 빌드 폴더에서는 현재 빌드 디렉터리를 기준으로 항목을 구성할 필요가 없지만 여전히 컨텍스트를 기준으로 구성해야 합니다. 이는 소위 프로젝트 디렉터리로부터의 독립입니다.

주의할 점은 출력 구성 항목은 컨텍스트와 관련이 없지만 일부 플러그인 구성 항목은 컨텍스트와 관련이 있다는 점입니다. 이에 대해서는 나중에 설명하겠습니다.

🎜output🎜🎜🎜🎜🎜output.path🎜🎜🎜패키지 파일이 출력되는 디렉터리입니다(상대 경로는 오류를 보고하지 않음). process .cwd()인 context의 기본값으로 사용됩니다. 🎜🎜기존 구성 방법 외에도 경로에 [hash] 템플릿을 사용할 수도 있습니다. 예를 들어 구성: 🎜🎜🎜🎜

// api 调用 webpack-dev-server
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
 hot: true,
 publicPath: '/web/'
});
server.listen(8282, "0.0.0.0")

🎜패키지 디렉터리는 다음과 같습니다. 🎜

🎜🎜여기서 해시 값은 다음의 해시입니다. 패키지된 경우 컴파일 프로세스 수신 콘텐츠가 변경되면 해시 값도 변경됩니다. 버전 롤백에 사용할 수 있습니다. 지속적인 통합 등을 용이하게 하기 위해 path.resolve(`./dist/${Date.now()}/`)로 구성할 수도 있습니다. 🎜🎜🎜ouput.publicPath🎜🎜🎜 Webpack을 처음 배웠을 때 publicPath를 완전히 이해하지 못했고 output.path와 관련이 있다고 잘못 믿었던 기억이 납니다. 이 구성 항목은 많은 시나리오에서 매우 중요합니다. 깊이 이해하지 못하면 유연하게 사용할 수 없습니다. 🎜🎜publicPath를 빠르고 정확하게 이해하려면 다음 공식으로 표현하면 될 것 같습니다. 🎜🎜정적 리소스의 최종 액세스 경로 = output.publicPath + 리소스 로더 또는 플러그인 구성 경로🎜 🎜🎜 예: 🎜🎜🎜🎜

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

🎜publicPath 기본값은 비어 있습니다 문자열입니다. 다음 다양한 기타 일반적인 publicPath 구성의 실제 의미를 확인하세요. 🎜🎜PublicPath는 상대 경로로 설정되어 있습니다. 상대 경로는 실제로 index.html에 대한 상대 경로입니다. 예를 들어 publicPath:"./dist/", JS 파일 이름은 위 공식에 따르면 JS에 액세스하는 최종 경로는 ./dist/bundle.js입니다. path는 index이기도 합니다. html은 Bundle.js의 경로를 참조하므로 index.html의 상대 경로를 통해 참조해야 하므로 index.html의 위치가 publicPath의 구성을 결정합니다. html은 A 폴더에 있고 게시된 경로는 폴더 A에 넣기를 원하지 않지만 폴더 A와 동일한 수준에 있도록 하려면 publicPath: "로 구성해야 합니다. index.html 의 상대 경로인 ./dist/", Bundle.js는 상위 dist 폴더에 있습니다. 상대 경로의 장점은 로컬로 액세스할 수 있다는 것입니다. 예를 들어 일부 하이브리드 APP에서 사용하는 파일 프로토콜은 절대 경로에서 작동하지 않습니다. 🎜🎜publicPath는 프로토콜 URL(//) 또는 http 주소(http://)를 기준으로 설정됩니다(예: publicPath:'http://wwww.qinshenxue.com/static/'). 개발 환경 물론 이를 사용하는 시나리오는 회사의 정적 리소스 서버와 같은 CDN에서 리소스를 호스팅하는 것입니다. 🎜🎜또한 publicPath는 '/'로 끝나야 하며, 다른 로더나 플러그인의 구성은 '/'로 시작하면 안 됩니다. 🎜🎜🎜🎜webpack-dev-server🎜🎜🎜🎜🎜publicPath🎜🎜

上面讲过 webpack 的 publicPath，那么这里的 publicPath 和 上面的publicPath是不是一回事呢？答案是两者区别很大，首先这里的publicPath用于开发环境的，因此不会出现配置 http 地址的情况，那这两者到底有啥区别呢？

我们知道 webpack-dev-server 打包的内容是放在内存中，通过express匹配请求路径，然后读取对应的资源输出。这些资源对外的根目录就是publicPath，可以理解为和 outpu.path 的功能一样，将所有资源放在此目录下，在浏览器可以直接访问此目录下的资源。

但是这个路径仅仅只是为了提供浏览器访问打包资源的功能，webpack中的loader和插件仍然是取ouput.publicPath，比如CSS里面的图片最终的路径仍是"/static/img/xxxx.png"，这也是为什么官方推荐 publicPath 和 webpack 配置的保持一致（除了http地址），配置一致才能正常访问其他静态资源。

上面的解释可能还是比较生硬，还是举几个例子来说明：

本例将两处 publicPath 配置成不一样的，这样更容易对比理解。

// webpack.config.js
output: {
 path: path.resolve(`./dist/`),
 filename: 'js/[name].js',
 publicPath: '/static/'
}

// api 调用 webpack-dev-server
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
 hot: true,
 publicPath: '/web/'
});
server.listen(8282, "0.0.0.0")

如何查看 webpack-dev-server 所有启动后的资源访问路径呢？有个简单的方法，就是访问/webpack-dev-server，本例访问截图如下：

上面的资源可以点击查看，你会发现，资源的路径都是/web/*****，所以在index.html中引入JS的路径应为/web/js/main.js，同时也能看到，style.css中的图片路径仍然为/static/img/****.png，而不是/web/。

html-webpack-plugin

这个插件的几处配置受路径配置影响，因此需要专门说明下。

template

template的路径是相对于 output.context，源码如下：

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

因此 template 对应的文件需要放在 ouput.context 配置的目录下才能被识别。

filename

filename的路径是相对于 output.path，源码如下：

this.options.filename = path.relative(compiler.options.output.path, filename);

在 webpack-dev-server 中，则相对于 webpack-dev-server 配置的 publicPath。

若 webpack-dev-server 中的 publicPath 和 ouput.publicPath 不一致，在这种配置下使用html-webpack-plugin是有如下问题：

• 自动引用的路径仍然以 ouput.publicPath 为准，和 webpack-dev-server 提供的资源访问路径不一致，从而不能正常访问；

• 浏览 index.html 需要加上 webpack-dev-server 配置的 publicPath 才能访问（http://localhost:8282/web/）。
  

这两个问题也反推出了最方便的配置为：

• ouput.publicPath 和 webpack-dev-server 的publicPath 均配置为'/'，vue-cli 就是这种配置

• template 放在根目录，html-webpack-plugin 不用修改参数的路径，filename 采用默认值。

总结

目前就针对上面基础路径做了简单的解释说明，如有错误，请不吝指出，后续若发现其他相关路径配置，再作补充。

위 내용은 Webpack의 관련 경로 구성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!