Webpack - Настройка относительного пути с помощью mini-css-extract-plugin - PullRequest
Новая
       24

Webpack - Настройка относительного пути с помощью mini-css-extract-plugin

0 голосов
/ 09 сентября 2018

Чтобы вывести мой css-файл с помощью mini-css-extract-plugin в каталог, я сделал что-то вроде следующего: 

  context: path.resolve(__dirname, "src"),
  entry: {
    "main": "./js/index.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg)/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[hash].[ext]"
            }
          },
        ]
      },
      {
        test: /\.css$/,
        use: ['MiniCss.loader', 'css-loader', 'postcss-loader']
      },
  plugins: [
    new MiniCss({
      filename: '[name].[hash].css',
    })
  ]
}

и в css у меня есть что-то вроде: background: url(img/fold.svg) right 30% / 100% no-repeat;

Теперь проблема в том, что на все изображения ссылаются с css/dist вместо dist. Я могу решить эту проблему, установив publicPath: '../' на MiniCss.loader, но тогда все изображения ссылаются на .././images, который работает в силу относительного пути, но не выглядит "естественным". Теперь мой вопрос, есть ли более чистый способ добиться этого?

...