Webpack中publicPath路径问题详解

下面我会详细讲解“Webpack中publicPath路径问题详解”的完整攻略，并且提供两个示例进行说明。

什么是publicPath?

在webpack构建应用程序时，会将我们的项目中各个模块依赖打包成为块（chunk），最终输出到一个或多个 bundle 中。当我们在使用<script>标签引入这些输出的静态资源时，会发现引用的路径不正确，这个时候我们就需要设置publicPath。publicPath参数就是webpack构建时输出的项目中的资源，引入时会添加在资源前面的一个路径。

我们可以在webpack.config.js中设置publicPath值，来修正资源引用路径问题。

module.exports = {
  //...
  output: {
    publicPath: '/dist/'
  }
};

上述代码就设置了所有资源的请求路径都会加上/dist/，比如请求out.js路径就会变成/dist/out.js。另外，webpack还支持以下的publicPath设置：

• 空字符串（''）：在引用生成的服务是使用相对路径（相对于所在文件的路径）进行引用。
• 相对路径（'./' 或 '../'）：在引用文件的路径前加上给定的相对路径。
• 绝对路径（'/root/path/'）：在引用文件的路径前加上给定的绝对路径。

示例一

接下来，我们将通过一个示例来更加深入的理解publicPath。我们假设我们正在为一个单页面应用程序构建一个Web应用，我们配置webpack如下：

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: '[name].js',
    publicPath: '/dist/'
  }
}

这里我们定义了入口文件为./src/index.js，生成的文件会输出到./dist目录下，publicPath为/dist/。在我们引入页面的资源的时候，会自动将publicPath加入到路径中，比如：

<script src="/dist/index.js"></script>

这样引用index.js文件就会自动加上publicPath设置的路径。

示例二

我们再看一个稍微复杂一点的示例。我们有一个由HTML, LESS, JavaScript等文件组成的项目，我们需要结合webpack对它进行打包。现在，我们不想将样式（LESS）和脚本（JS）打包到同一个文件中，而是将它们单独分别打包，最终输出到css和js目录下。

为了实现这个效果，我们可以这样配置webpack：

module.exports = {
  entry: {
    index: './src/js/index.js',
    about: './src/js/about.js'
  },
  output: {
    path: __dirname + '/output',
    filename: 'js/[name].js',
    publicPath: 'http://cdn.example.com/'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
};

这里我们定义了两个入口文件index和about，使用不同的js文件进行了分别打包，将它们分别输出到output/js目录下。同时，使用publicPath配置将所有的资源请求都放到了CDN上。

我们还使用了less-loader,css-loader,style-loader来处理LESS文件，并将它们打包到了css目录下。

在HTML页面中引用我们的样式和脚本时，会使用publicPath配置的地址：

<link rel="stylesheet" href="http://cdn.example.com/css/index.css">
<script src="http://cdn.example.com/js/index.js"></script>
<script src="http://cdn.example.com/js/about.js"></script>

这里可以看到，通过publicPath设置，我们的项目已经成功地托管在了CDN上，并且每个资源的请求路径都自动加上了publicPath的路径。