Paths in the Webpack

Configuration that involves many path parameters in Webpack. Do a tidy up here.

Context

The context is the base directory at Webpack compile time, and the entry portal is found relative to this directory.

If not configured, the default value is the current directory, Webpack set the context, the default value code:

This.set ("Context", PROCESS.CWD ());

The directory where the Webpack is running.

The context should be an absolute path, assuming that the portal is src/main.js, you can set

{

Context:path.resolve ("./src")

Entry: "./main.js"

}

Context practical role?

The official documentation is interpreted to make your configuration independent of the engineering catalog "this makes your configuration independent from CWD (current working directory).

How do you understand that?

In the separation of development and production of the configuration file, generally put Webpack.config in the build folder, at this time entry do not consider relative to the build directory to configure, still relative to the context.

The configuration item for output is not related to context, but some plug-ins have configuration items associated with the context, which are explained later.

Output

Output.path

Packaged file output directory, the recommended configuration is absolute path (relative path does not error), the default value and the context default is the same as PROCESS.CWD ().

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

Output: {

Path:path.resolve ('./dist/[hash:8] '),

FileName: ' [name].js '

}

The hash value here is the hash of the compilation process, and if the contents of the package are changed, the hash value will change.

This can be used for version rollback. You can also set the Path.resolve ('./dist/${date.now ()} ') to facilitate continuous integration and so on.

Output.publicpath

Word, the following formula to express

Static resource final Access Path = Output.publicpath + resource loader or plug-in configuration path

To illustrate:

Output.publicpath = '/static/'

Picture Url-loader Configuration

{

　　name: ' img/[name].[ EXT] '

}

The final image access path is

Output.publicpath + ' img/[name]. [ext] ' = '/static/img/[name]. [ext] '

JS output.filename Configuration

{

　　filename: ' Js/[name].js '

}

The final JS access path is

Output.publicpath + ' js/[name].js ' = '/static/js/[name].js '

Css

New Extracttextplugin (' css/style.css ');

The final CSS access path is

Output.publicpath + ' css/style.css ' = '/static/css/style.css '

The practical significance of common publicpath configurations

1. The relative path is actually relative to the index.html. Because the final bundle.js is introduced through relative paths in index.html.

The advantage of relative paths is that locally accessible, in some mixed apps with the file protocol, with absolute path is not possible.

2. With respect to the URL (//) or HTTP address (//), use this scenario to host the resource to a CDN, such as a company's static resource server.

In addition, Publicpath should end with '/' and the configuration of other loader or plugins should not start with '/'.

Webpack-dev-server

1.publicPath

The Publicpath here is for the development environment and does not appear to configure HTTP addresses.

The content that WDS packs is put in memory totals, matches the request path through Express, and then reads the corresponding resource output.

These resources are external to the root directory is Publicpath, can understand and output.path functions, like all resources placed in this directory,

Resources in this directory can be accessed directly by the browser. But this path is only for the purpose of providing a browser access to packaged resources,

Webpack in the loader and plug-ins are still taken output.publicpath, such as the CSS inside the final path is "/static/img/xxx.png",

This also explains why the official recommended Publicpath and Webpack configurations are consistent (except HTTP addresses), and the configuration is consistent with novice normal access to other static resources.

To illustrate:

Webpack.config.js

Output: {

　　Path:path.resolve ('./dist/'),

　　FileName: ' Js/[name].js ',

　　Publicpath: '/static/'

}

API call 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 ');

How do I see webpack-dev-server all the resource access paths after startup? Access /webpack-dev-server.

You will find that the path of the resource is/web/****, so the path to introduce JS in index.html should be/web/js/main.js,

Also the path to the picture in Style.css is still/static/img/***.png

Html-webpack-plugin

Several configurations of this plugin are affected by the path configuration.

Template

The path of template is relative to Output.context, the source code is as follows:

This.optiobns.template = This.getfulltemplatepath (this.options.template, Compiler.context);

Therefore, the file corresponding to the template needs to be placed in the Output.context configuration directory to be recognized.

FileName

The path to filename is relative to Output.path and the source code is as follows:

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

In Webpack-dev-server, the Publicpath that is configured relative to the Webpack-dev-server

If the Publicpath and Ouput.publicpath in Webpack-dev-server are inconsistent, using html-webpack-plugin in this configuration has the following problems:

• The path of the auto-reference is still ouput.publicpath, and the resource access path provided by Webpack-dev-server is inconsistent, which can not be accessed normally;
• Browse index.html need to add Webpack-dev-server configuration Publicpath to access (http://localhost:8282/web/).
  

These two issues are also anti-roll with the most convenient configuration as:

• The Publicpath of Ouput.publicpath and Webpack-dev-server are configured as '/', VUE-CLI is this configuration
• The template is placed in the root directory, Html-webpack-plugin does not modify the path of the parameter, and filename takes the default value.

Paths in the Webpack