Webpack: проблема с загрузкой внешних CSS-файлов в производственной сборке

Bilal Saeed спросил: 14 ноября 2017 в 07:27 в: javascript

Я использую веб-пакет для создания производственной сборки, которая будет содержать минимизированный JS и ограниченный CSS. Но когда я пытаюсь запустить сборку, ни один из внешних листов CSS не загружается, хотя процесс сборки был успешным.

В моей результирующей папке сборки все ресурсы, такие как css, помещаются в корневой каталог.

Вот мой файл webpack.production.congig:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {
  entry:  __dirname + "/app/index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            },
          },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/index.tmpl.html"
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]}

А вот как выглядит мой шаблон индекса:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="./app/resources/images/favicon.ico" />
    <link type="text/css" src="style.css"/>  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

Содержимое папки моей сборки выглядит следующим образом:


0 ответов