Detailed explanation of the related configuration of paths in Webpack

This article mainly introduces you to the relevant information about the path configuration in Webpack2. The introduction in the article is very detailed and has certain reference and learning value for everyone. Friends who need it can take a look below.

Preface

There are many path parameter configurations involved in Webpack2. If you don’t know why, it is easy to get confused and make mistakes. This article collects as much as possible the configuration of paths involved in Webpack2, and strives to explain it in simple terms.

context

context is the base directory when webpack is compiled, and the entry point (entry) will be searched relative to this directory.

The default value is the current directory. The webpack setting context default value code can be downloaded locally:

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

process.cwd()That is The directory where webpack is running (equivalent to the directory where package.json is located).

context should be configured as an absolute path. If the entry starting point is src/main.js, you can configure it as:

{
 context: path.resolve('./src'),
 entry: './main.js'
}

At this time, entry cannot be configured as './src/main.js', because webpack will find the entry starting point (main.js) relative to the src directory area configured in the context, and main.js is in this directory, so the entry should be configured as the current directory (. /).

What does context actually do? The official document explains that "This makes your configuration independent from CWD (current working directory)". How to understand? For example, when developing and producing configuration files separately, webpack.config is generally placed in the build folder. At this time, the entry does not need to be configured relative to the build directory, but still needs to be configured relative to the context. , which is so-called independent of the project directory.

It should be noted that the output configuration items have nothing to do with context, but some plug-in configuration items are related to context, which will be explained later.

output

output.path

#The directory where the packaged file is output, it is recommended to configure it as absolute Path (relative paths will not report errors), the default value is the same as the default value of context, which is

process.cwd().

In addition to the conventional configuration method, you can also use the [hash] template in the path, such as configuration:

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

The packaged directory is as follows:

The hash value here is the hash of the compilation process. If the packaged content changes, the hash value will also change. This can be used for version rollback. You can also configure it as

path.resolve(`./dist/${Date.now()}/`) to facilitate continuous integration, etc.

ouput.publicPath

I remember when I first learned Webpack, I never fully understood publicPath, and even mistakenly thought it was the same as

output.path is related. This configuration item is very important in many scenarios. If you do not understand it in depth, you cannot use it flexibly.

How to understand publicPath quickly and accurately, I think it can be expressed by the following formula:

Final access path of static resources =

output.publicPath + resource loader or Plug-in and other configuration paths

Example:

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 The default value is empty

String, see others next The practical significance of various common publicPath configurations.

publicPath is set to a relative path. The relative path is actually the path relative to index.html. Why do you say this? For example,

publicPath:"./dist/", the JS file name is bundle.js. According to the above formula, the final path to access JS is ./dist/bundle.js, which is also index.html Reference the path to bundle.js. Since bundle.js needs to be referenced through a relative path in index.html, the location of index.html determines the configuration of publicPath. For example, index.html is in the A folder, but the published path does not want to be placed. to folder A, but if you want to be at the same level as folder A, then it should be configured as publicPath: "../dist/", which is the path relative to index.html, bundle .js is in the dist folder on the upper level. The advantage of relative paths is that they can be accessed locally. For example, the file protocol used by some hybrid APPs will definitely not work with absolute paths.

publicPath is set relative to the protocol url (//) or http address (http://), such as

publicPath:'http://wwww.qinshenxue.com/static/' , of course, the development environment cannot do this. The scenario of using this is to host resources to CDN, such as the company's static resource server, etc.

In addition, publicPath should end with '/', and the configuration of other loaders or plug-ins should not start with '/'.

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 采用默认值。

总结

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

The above is the detailed content of Detailed explanation of the related configuration of paths in Webpack. For more information, please follow other related articles on the PHP Chinese website!