我是webpack的新手，我制作了一个react应用程序，将index.js作为入口文件，将app.js作为渲染的根组件。webpack构建良好，没有出现错误，脚本标记也被添加到html文件中，但没有为应用程序组件呈现内容。这些文件的代码是-index.js-
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';
// import { initWeb3 } from './utils/web3';
const app = document.getElementById('app');
ReactDOM.render(
<App />,
app
);
App.js-
import React from 'react';
export class App extends React.Component{
render(){
return(
<div>
<h1> Hi there</h1>
</div>
)
}
}
webpack.config.js文件是-
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
const nodeExternals = require('webpack-node-externals');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template:__dirname+'/src/index.html',
filename:'index.html',
inject:'body'
})
const EslintOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`,
], // these are the options we'd previously passed in
}
module.exports = {
resolve: {
fallback: {
fs: false,
os:false,
tls: false,
net: false,
path: require.resolve("path-browserify"),
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
}
},
entry: {
app: __dirname+'/src/index.jsx'
},
externalsPresets:{node:true},
externals:[nodeExternals()],
output: {
filename: '[name].bundle.js',
path: __dirname+'/public'
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
},
{
test: /.(css|scss)$/,
include: /node_modules/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(css|scss)$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
loader: 'file-loader'
}
]
},
target:'node',
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
//new webpack.NamedModulesPlugin(),
new NodePolyfillPlugin(),
new ESLintPlugin(EslintOptions),
new CleanWebpackPlugin(),
//new webpack.HotModuleReplacementPlugin(),
HtmlWebpackPluginConfig
// new HtmlWebpackPlugin({
// template: './src/index.html'
// }),
],
devtool: 'eval-source-map',
devServer: {
port:3010,
static:{
directory: './public'
},
historyApiFallback: true,
hot: true
},
mode: 'development'
};
HTML文件index.HTML是-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ethereum Ecommerce Store</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
此外，在运行localhost时，我在控制台中收到了这个错误。
Uncaught ReferenceError: require is not defined
at Object.util (app.bundle.js:245:1)
at __webpack_require__ (app.bundle.js:274:33)
at fn (app.bundle.js:415:21)
at eval (index.js?ce24:2:12)
at Object../node_modules/console-browserify/index.js (app.bundle.js:40:1)
at __webpack_require__ (app.bundle.js:274:33)
at fn (app.bundle.js:415:21)
at eval (log.js:1:41)
at Object../node_modules/webpack/hot/log.js (app.bundle.js:190:1)
at __webpack_require__ (app.bundle.js:274:33)
您不应该使用
externals:[nodeExternals()]
在您的webpack.config.js文件中。
指定它将要求webpack使用nodejs(后端(require()来获取依赖关系。
客户端(浏览器web api(不提供require((作为函数，因此本地主机上会出现错误。
删除配置将修复错误。