Question

我开始使用React 15。在完成教程和阅读一些文章后，我提出了一些关于工作流程的问题。这是我的索引和webpack文件的外观。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lugmety.com | The fastest, Most convenient way to order from the finest restaurants in Jeddah.</title>
    <link rel="shortcut icon" href="assets/images/lugmety-favicon.png">
    <link rel="stylesheet" href="assets/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app"></div>

<script src="assets/js/jquery.min.js"></script>
<script src="assetsjs/bootstrap.min.js"></script>
<script src="assets/js/scripts.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;

这是我的index.html文件。

编译是否编译脚本，例如jquery.js，bootstrap.js和自定义脚本。 script.js并将其包含在已编译的bundle.js？
在开发过程中，我的images位于src/assets/img/。我看不到编译器将资产复制到dist文件夹中。
我在哪里设置index.html中的CSS和JS文件的相对路径以及组件中的图像？例如。 <img src="/assets/img/image.jpg">或<img src="/src/assets/img/image.jpg">

非常感谢你的时间。

Answer 1

在您的情况下，它不会包含在bundle.js中，因为您没有使用npm模块进行bootstrap和jquery。您可以尝试这种方式包含在您的开发依赖项中：

npm i -D bootstrap jquery
您不需要将资源复制到dist文件夹。 Webpack是一个模块捆绑器，您将在文件中引用所有内容。您只需要指定一个加载器。供您参考：

How to copy static files to build directory with Webpack?
我没有真正得到问题，但是当然你会在index.html中为css设置css的路径，你只需要用相对路径导入它。例如：

从＆＃39; ./ App＆＃39;

React上关于webpack工作流的几个混淆和查询

1 个答案: