在 React 上的 webpack 工作流程上很少有混淆和查询



我开始使用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文件。

编译是否编译脚本,例如
  1. jquery.jsbootstrap.js和自定义脚本。script.js并将其包含在编译bundle.js中?

  2. 在开发中,我的images位于src/assets/img/.我看不到编译器将资产复制到 dist 文件夹中。

  3. 从哪里设置索引中 CSS 和 JS 文件的相对路径.html以及组件中的图像?例如。<img src="/assets/img/image.jpg"><img src="/src/assets/img/image.jpg">

非常感谢您的时间。

  1. 不,在您的情况下,它不会包含在捆绑包中.js因为您没有使用 npm 模块进行引导和 jquery。您可以尝试以这种方式包含在您的开发依赖项中:

    npm i -D bootstrap jquery

  2. 您无需将资源复制到 dist 文件夹。Webpack 是一个模块捆绑器,您在文件中引用的所有内容都将包含在内。您只需要为此指定一个加载器。供您参考:

    如何使用 Webpack 复制静态文件来构建目录?

  3. 我真的不明白这个问题,但当然你会在索引中为 css 设置路径.html对于 css,你只需要使用相对路径导入它。例如:

    从"./应用程序"导入应用程序

最新更新