Question

由webpack编译的我的反应应用程序无法在node_modules文件夹中找到包。我的src/index.html正确设置了网址，如下所示：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app"></div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="/bundle.js"></script>
</body>
</html>

webpack.config.js

let webpack = require("webpack");
let path = require("path");

let DIST_DIR = path.resolve(__dirname,"dist");
let SRC_DIR = path.resolve(__dirname,"src");

let config = {
    entry: SRC_DIR + "/index.js",
    output: {
        path: DIST_DIR + "/",
        filename: "bundle.js",
        publicPath: "/"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets:["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

但控制台会报告以下错误，这些错误似乎忽略了网址开头设置的任何../。

控制台错误：

获取http://localhost:8080/node_modules/font-awesome/css/font-awesome.min.css
  获取http://localhost:8080/node_modules/jquery/dist/jquery.min.js

我尝试使用./设置相对路径，如下所示，但结果相同

<link rel="stylesheet" href="./../node_modules/font-awesome/css/font-awesome.min.css">

和

<link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css">

文件夹结构：

app/
 -dist/
    -bundle.js
    -index.html
 -node_modules/
 -src/
    -index.html
    -index.js

我该怎么做？我应该将node_modules移动到src/文件夹吗？

Answer 1

因此，您面临的问题可能是由于您的文件夹结构。如果将index.html置于根级别，则问题可能会得到解决。 Here是一个简单的github存储库，与您的存储库相同。

无法从index.html中的节点模块导入CSS和JS

1 个答案: