webpack4配置中的 publicPath和contentBase

1.在webpack.config.js配置中的两个publicPath和一个contentBase

const { resolve } = require('path')
module.exports={
    output: {
        path: resolve(__dirname, './dist'),
        filename: 'main.js',
        publicPath:'./'
    },
    devServer: {
        contentBase: './src',
        publicPath:'/',
        port: 3000,// 端口号
        open: true,// 自动打开浏览器
    }

2.output中的publicPath

官方文档：对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。有时必须用到，例如：当将资源托管到 CDN 时。此选项的值都会以/结束。

通俗的说也就是影响资源生文件的引入路径

只有我们在文件中使用相对路径引入文件时，这个值会影响最后文件的引入路径，当文件以http或者hhtps路径开头时，是不会影响打包后的文件路径(webpack 可能做了优化）。

如果设置了publicPath=‘./’ 或者publicPath='/' 或者publicPath='/test/' 

比如我们源码中引入<link rel="stylesheet" hpuref="index.css">

配置                                       打包后：

publicPath=‘./’        ---->        <link rel="stylesheet" href="./index.css">

publicPath='/'         ---->       <link rel="stylesheet" href="/index.css">

publicPath='/test/'  ---->       <link rel="stylesheet" href="/test/index.css">

2.webpack-dev-server 中配置的 publicPath

 webpack-dev-serve会在内存中保存一份打包后的文件，publicPath映射的资源就是内存的根目录或者说是内存中的文件，比如我们本地服务运行在 http:localhost:3000,publicPath='/a'。

源码目录：

打包后生成的文件：

运行npx webpack-dev-serve后控制台是这样的

绿色的即是内存中的文件，可以想象成内存中有这样一个打包后文件目录，且和打包的文件夹dist内容是一样的

当我们去访问http:localhost:3000/a/ 时，它会去内存中查找 ，此时会显示出index.html的内容。注意是http:localhost:3000/a/，不是http:localhost:3000/a

3.关于 webpack-dev-serve中的contentBase

官方文档：告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。

通俗的讲就是，contentBase访问的不是内存中的文件，而是我们本地真实存在的。

比如我们的配置是下面这样的，目录结构如上

 devServer: {

        contentBase: './',

        publicPath:'/a',

        port: 3000,

        open: true

    },

当我们去访问http:localhost:3000，页面是这样的

当我们去访问http:localhost:3000/a/，它会去内存中查找 ，此时会显示出index.html的内容.

devServer.publicPath优先于devServer.contentBase的意思：当devServer.publicPath = ‘/’ 时，我们默认打开http:localhost:3000地址，此时就会直接加载内存中的资源，即使设置了contentBase也是无效的。

如果我们的配置是这样的：

 devServer: {

        contentBase: './src',

        publicPath:'/',

        port: 3000,

        open: true

    },

在输入地址栏输入http:localhost:3000它会去内存中查找 ，此时会显示出index.html的内容

但是输入http:localhost:3000/src则是下面这样的

但是如果devServer.publicPath不是‘/’ 时，或者不写则http:localhost:3000作为本地src文件夹的根目录

 devServer: {

        contentBase: './src',

        publicPath:'/a',

        port: 3000,

        open: true

    }

devServer: {

        contentBase: './src',

        port: 3000,

        open: true

    },

输入http:localhost:3000,如下所示

总结：

output.publicPath :影响资源生成路径和文件的引入路径

devServer.publicPath ：设置内存中资源的访问地址，当我们修改本地代码时会重新编译，替换掉内存中原来的文件

devServer.contentBase：设置访问本地资源的目录