Question

我为一个小网站设置了一个非常轻便的webpack。我根据屏幕分辨率从javascript文件中加载了一堆图像。

在构建我的项目之后，我只需单击从html-webpack-plugin输出的index.html，一切正常。

然而，当我尝试使用webpack-dev-server运行webpack时，我身上的所有图像都是404。

这是404的开发工具

这是我的目录

我已经阅读了所有我可以得到的东西。我尝试使用带有图像的文件的文件加载器，它什么也没做。我从gulp管道响应大小的图像，html是加载图像的东西。从所有教程和webpacks文档中，如果只是在浏览器中加载index.html，图像应该像加载一样加载！

是什么给出的？

这是我的webpack.config.js文件

const path = require("path");
const webpackDashboard = require('webpack-dashboard/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/js/main.js",
    output: {
      path: path.resolve(__dirname, "./build"),
      filename: "bundle.js"
    },
    mode: 'production',
    module: {
      rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["babel-preset-env"]
              }
            }
        },
        {
          test: /\.css$/,
          loaders: ["style-loader","css-loader"]
        }

      ]
    },
    plugins: [
      new webpackDashboard(),
      new HtmlWebpackPlugin
      ({
      filename: 'index.html',
      template: 'src/public/index.html'
      }),
      new HtmlWebpackPlugin
      ({
      filename: 'restaurant.html',
      template: 'src/public/restaurant.html'
      })
    ]
  };

这是我的package.json（无论出于何种原因，也许lol）

"scripts": {
    "gulp": "gulp",
    "babel": "babel src -d build",
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dashboard -- webpack-dev-server build/bundle.js --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "del": "^3.0.0",
    "file-loader": "^1.1.11",
    "gulp": "^3.9.1",
    "gulp-responsive-images": "0.0.3",
    "html-webpack-plugin": "^3.2.0",
    "idb": "^2.1.2",
    "responsive-loader": "^1.1.0",
    "run-sequence": "^2.2.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.10.0",
    "webpack-cli": "^2.1.4",
    "webpack-css-loaders": "^1.0.0",
    "webpack-dashboard": "^2.0.0",
    "webpack-dev-server": "^3.1.4"
  }

这让我很沮丧。我现在只用JS编程2个月了，很抱歉，如果这是显而易见的我错过了！

提前致谢。这是一个github链接，如果它更容易尝试它！

npm install && gulp && npm run build && npm run start

安装模块并启动实时Web服务器。

Webpack没有正确加载图像，即使它们在文件夹中也能获得404

0 个答案: