css - Webpack 4 Production Build 不加载图像和 CSS

Question

我是 webpack 的新手，所以我面临以下几个问题:

我的 GitHub repo

<强>1。这是问题所在:

我的 Webpack 文件:

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
  }
};

我的文件夹结构:

我的包.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 文件夹，但是当我从 dist 文件夹运行 index.html 时；我看不到任何图像和 CSS 已加载。 我在这里做错了什么？

此外，我正在构建静态网站，因此我将同时拥有多个 HTML 文件，例如home.html 等，那么我如何相应地链接这些页面呢？

Answer 1

如解释here Sass 不提供 url 重写，所有类似 url(...) 的导入都应该相对于入口文件。

有一个特定的 Webpack 插件可以自动执行:resolve-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
        }
    }]
},