Webpack 4 Production Build без загрузки изображений и CSS

Question

Я новичок в вебпаке, поэтому столкнулся с несколькими проблемами ниже:

Мой GitHub Репо

1. Вот проблема:

Файл моего веб-пакета:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Require  html-webpack-plugin plugin

module.exports = {
  entry: __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
  output: {
    path: __dirname + '/dist', // Folder to store generated bundle
    filename: 'bundle.js',  // Name of generated bundle after build
    publicPath: '/' // public URL of the output directory when referenced in a browser
  },
  module: {  // where we defined file patterns and their loaders
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: [
          /node_modules/
        ]
      },
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            plugins: function () { // post css plugins, can be exported to postcss.config.js
              return [
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        exclude: /node_modules/,
        use: 'file-loader?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        exclude: /node_modules/,
        use:'file-loader?name=images/[name].[ext]'
      }
    ]
  },
  plugins: [  // Array of plugins to apply to build chunk
    new HtmlWebpackPlugin({
      template: __dirname + "/src/public/index.html",
      inject: 'body'
    })
  ],
  devServer: {  // configuration for webpack-dev-server
    contentBase: './src/public',  //source of static assets
    port: 7700, // port to run dev-server
  }
};

структура моей папки:

My package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --history-api-fallback --inline --progress",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.1.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.13.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "roboto-fontface": "^0.9.0"
  }
}

Когда я запускаю npm run start, я вижу свое приложение в браузере со всеми загруженными CSS и изображениями.

Когда я запускаю npm run build, я вижу папку dist, однако, когда я запускаю index.html из папки dist; Я не вижу изображения и загруженный CSS. Что я тут не так делаю?

Также я создаю статический веб-сайт, поэтому у меня будет несколько HTML-файлов, например, на стороне. home.html и т. д., как я могу соответственно связать эти страницы?

Answer 1

Как объяснено здесь Sass не обеспечивает перезапись URL-адреса, и все url(...) -подобные импорты должны относиться к файлу ввода.

Существует специальный плагин Webpack для автоматизации: resol-url-loader .

Он предназначен для настройки сразу после sass-loader с включенной картой источника.

{
    test: /\.(scss)$/,
    use: [{
        loader: 'style-loader',
    }, {
        loader: 'css-loader',
    }, {
        loader: 'postcss-loader',
        options: {
            plugins: function() {
                return [
                    require('autoprefixer')
                ];
            }
        }
    }, {
        loader: 'resolve-url-loader'
    },
    {
        loader: 'sass-loader',
        options: {
            sourceMap: true
        }
    }]
},