【webpack】-【devServer】-【publicPath】

Question

我按教程设置了publicPath，访问出错，见截图。不加publicPath
倒是可以正常。

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
   mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      publicPath: '/assets/'   //删除这句正常访问
    },
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Answer 1

publicPath如果配置了，那访问网页的地址需要修改为localhost:8080/publicPath,按照你提供的配置大致为localhost:8080/assets/,publicPath可以理解为域名后面的一个目录地址，根据情况配置。

针对补充问题回答：

1. publicPath

可以看官方的api，我的理解是经过webpack处理的js、css、html文件访问目录是依赖于publicPath配置的。

1. 设置默认index.html

注意看historyApiFallback,里面的to指定为默认的index.html目录。这些配置都是在开发环境下。如果是生产环境就需要服务器做默认index.html的处理。

devServer: {
    historyApiFallback: {
      rewrites: [
        {
          from: /.*/,
          to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
        },
      ],
    },
    publicPath: config.dev.assetsPublicPath,

  },