Конфигурация Webpack не учитывает импорт css

Question

Я не могу найти способ правильно загрузить сайт c, который не находится в папке root:

let HWPTest = new HtmlWebpackPlugin({
   template: __dirname + "/src/artists/test.html",
   filename: 'artists/test.html',
   favicon: './src/assets/img/favicon.ico',
   inject: "body",
   hash: false,
   minify: {
    removeComments: true,
    collapseWhitespace: true
  }
})

, что здесь нужно для вставки css импорта в 0.0. 0.0: 9000 / исполнителей / test. html?

Конфигурация работает, только если сделать test. html в папке root ('/') и объявить значение filename свойство соответственно.

Любая подсказка будет принята с благодарностью!

РЕДАКТИРОВАТЬ

Я забыл упомянуть, что он также игнорирует js импорт скриптов. Css и js импортируются при этом

module.exports = merge(common, {
mode: 'production',
entry: {
    main: path.resolve(__dirname, "src/assets/js/main.js")
},    
output: {
    publicPath: "./",
    filename: 'assets/js/[name].[chunkhash].js',
    chunkFilename: 'assets/js/[name].[chunkhash].js'
}

Проблема здесь в том, что webpack преобразует свои скрипты импорта в следующее, что затем не может быть найдено html документами, которые не расположены в root:

    <script type="text/javascript" src="./assets/js/manifest.00cfec2c30f0d8c825a1.js"></script>

Вместо этого я хотел бы получить

    <script type="text/javascript" src="/assets/js/manifest.00cfec2c30f0d8c825a1.js"></script>

Обратите внимание на отсутствующую точку в начале src, любые идеи приветствуются!

РЕШЕНИЕ

заменить запись publicPath на:

publicPath: '/'

Просто так!

Answer 1

может быть, он вам послужит

const HtmlWebPackPlugin = require("html-webpack-plugin");
const PORT = process.env.PORT || '80';
var path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    index: ['babel-polyfill', './src/index.js']
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [{
          loader: "html-loader"
        }]
      },
      {
        test: /\.css$/,
        use: [{
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      },
      {
        test: /\.(svg|png|jpg|jpeg|gif)$/,
        use: [{
          loader: "file-loader",
          options: {
            // name: '[path][name].[ext]',
            outputPath: 'images'
          }
        }]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, "public"),
    filename: 'main.js',
    publicPath: '/',
  },
  devServer: {
    contentBase: path.join(__dirname, "public"),
    port: PORT,
    historyApiFallback: true,

    filename: 'main.js'
  },


  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};