I want to set up a web page that is two pages(multiple in the long run, but just 2 for this example). The first page looks like this picture and just has a link that says "Click Me". When you click this link, it takes you to the second webpage which says "Hello World".
I can get the webpage working for a website with one page. It uses this webpack.config.js file
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;
I tried modifying this config file, so that I could have multiple pages. You can see the modifications in the following config file, which I modified based on these instructions
webpack.config.js for multiple pages
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;
I receive the following output error when using the latter webpack.config.js file
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.
OTHER FILES THAT MAY BE USEFUL
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
)
package.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"] }
Both index.html and 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>
File hierarchy
Aucun commentaire:
Enregistrer un commentaire