我开始使用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 文件夹中。从哪里设置索引中 CSS 和 JS 文件的相对路径.html以及组件中的图像?例如。
<img src="/assets/img/image.jpg">
或<img src="/src/assets/img/image.jpg">
非常感谢您的时间。
-
不,在您的情况下,它不会包含在捆绑包中.js因为您没有使用 npm 模块进行引导和 jquery。您可以尝试以这种方式包含在您的开发依赖项中:
npm i -D bootstrap jquery
-
您无需将资源复制到 dist 文件夹。Webpack 是一个模块捆绑器,您在文件中引用的所有内容都将包含在内。您只需要为此指定一个加载器。供您参考:
如何使用 Webpack 复制静态文件来构建目录?
-
我真的不明白这个问题,但当然你会在索引中为 css 设置路径.html对于 css,你只需要使用相对路径导入它。例如:
从"./应用程序"导入应用程序