javascript - 使用 Webpack 和 React 创建一个 2 页网站( index.html 和 another.html )
问题描述
我想设置一个有两个页面的网页(从长远来看是多个,但本示例只有 2 个)。第一页看起来像这张图片,只有一个链接,上面写着“点击我”。当您单击此链接时,它会将您带到显示“Hello World”的第二个网页。
我可以让网页为一个只有一页的网站工作。它使用这个 webpack.config.js 文件
webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');
const config = {
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
}
};
module.exports = config;
我尝试修改此配置文件,以便我可以拥有多个页面。您可以在以下配置文件中看到修改,我根据这些说明进行了修改
webpack.config.js 用于多个页面
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');
const config = {
entry: {
index: './src/index.js',
services: '../src/services.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true,
chunks: ['index'],
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: './src/services.html',
inject: true,
chunks: ['services'],
filename: 'services.html'
})
]
};
module.exports = config;
使用后一个 webpack.config.js 文件时收到以下输出错误
Jacob-Air:Dir Jacob$ npm start
> default@1.0.0 start Dir/Dir_html
> webpack-dev-server
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from Dir/Dir_html
✖ 「wdm」: Hash: 7e17e6d8bd9ec606703d
Version: webpack 4.35.0
Time: 2547ms
Built at: 06/28/2019 11:09:27 AM
Asset Size Chunks Chunk Names
index.html 629 bytes [emitted]
index.js 1.25 MiB index [emitted] index
services.html 752 bytes [emitted]
services.js 359 KiB services [emitted] services
Entrypoint index = index.js
Entrypoint services = services.js
[0] multi (webpack)-dev-server/client?http://localhost ./src/index.js 40 bytes {index} [built]
[1] multi (webpack)-dev-server/client?http://localhost ../src/services.js 40 bytes {services} [built]
[./es6/Banner.js] 1.7 KiB {index} [built]
[./es6/Footer.js] 345 bytes {index} [built]
[./es6/Header.js] 579 bytes {index} [built]
[./es6/HomePageServices.js] 3.4 KiB {index} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {index} [built]
[./node_modules/react/index.js] 190 bytes {index} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {index} {services} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {index} {services} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {index} {services} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {index} {services} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {index} {services} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {index} {services} [built]
[./src/index.js] 534 bytes {index} [built]
+ 35 hidden modules
ERROR in Entry module not found: Error: Can't resolve '../src/services.js' in 'Dir/Dir_html'
ERROR in multi (webpack)-dev-server/client?http://localhost ../src/services.js
Module not found: Error: Can't resolve '../src/services.js' in 'Dir/Dir_html'
@ multi (webpack)-dev-server/client?http://localhost ../src/services.js services[1]
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 789 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
Child html-webpack-plugin for "services.html":
1 asset
Entrypoint undefined = services.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/services.html] 909 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ 「wdm」: Failed to compile.
其他可能有用的文件
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
const Content = () => {
return (
<React.Fragment>
<div>
<a src='./about.html'>Click Me</a>
</div>
</React.Fragment>
)
}
const root = document.getElementById('Content');
ReactDOM.render (
<Content />,
root
)
src/services.js
import React from 'react';
import ReactDOM from 'react-dom';
const Content = () => {
return (
<React.Fragment>
<span>Hello World</span>
</React.Fragment>
)
}
const root = document.getElementById('Content');
ReactDOM.render (
<Content />,
root
)
包.json
{
"name": "default",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"html-webpack-template": "^6.2.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
index.html 和 services.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Web Dexter</title>
<link rel="stylesheet" type="text/css" href="css/myCss">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=1.10, minimum-scale=0.80">
</head>
<body>
<div id='Content'></div>
</body>
<script src='./bundle.js'></script>
</html>
文件层次结构
解决方案
条目中应该是这样的:
entry: {
index: './src/index.js',
services: './src/services.js'
},
推荐阅读
- postgresql - 在 postgres 中使用 CTAS 时内存下降
- javascript - 我需要检查密码的长度,但由于某种原因 .lenght 不起作用?
- c# - 错误:对于带有 from 的 Linq,“表达式树 lambda 可能不包含空传播运算符”
- java - 如何将两个一维数组值存储到jdbc java bean值中并将其存储到mysql中?
- jquery - 为什么水平滚动条一直不可见
https://libbyhealth.com/%d7%94%d7%a0%d7%97%d7%95%d7%aa-%d7%95%d7%9e%d7%91%d7%a6%d7%a2% d7
- html - 在导航栏中并排对齐 3 个 div
- virtual-machine - 在没有 GUI 的 Ubuntu 服务器上创建无头 Ubuntu VM
- java - 修改calender类中的after方法以在大于等于而不是严格大于时返回true
- html - 使用fabric js捕获和保存对象坐标
- visual-studio-code - 无法导入 'azure.functions' pylint(import-error) [3,1] 和无法导入 '__app__modules.library_finder' pylint(import-error) [4,1]