我尝试运行我的应用程序,但在控制台没有任何东西,窗口中没有任何东西,我试图添加<script src="target/app.js"></script>
但它使错误Cannot GET /target/app.js
。另外我在搜索如何工作create-react-app
,因为它不使用任何脚本与html文件中的包但无济于事
这是webpack.config.js
。但我不认为这与webpack有关。或者它可能与devServer有问题?
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
app: ['@babel/polyfill', './src/index.js']
},
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(js|jsx)?$/,
include: /node_modules/,
use: ['react-hot-loader/webpack'],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
loader: require.resolve('babel-loader'),
},
{
test: /\.(js|jsx)$/,
loader: 'prettier-loader',
exclude: /node_modules/,
options: require('./prettier.config')
},
{
test: /\.(jpe?g|png|gif)$/,
use: [{
/* inline if smaller than 10 KB, otherwise load as a file */
loader: 'url-loader',
options: {
limit: 10000
}
}]
},
{
test: /\.(eot|svg|ttf|woff2?|otf)$/,
use: 'file-loader'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css', 'scss']
},
output: {
path: path.resolve(__dirname, '/target/'),
filename: '[name].js',
chunkFilename: '[name].chunk.js',
publicPath: '/public/'
},
plugins: [
new webpack.ProvidePlugin({
R: 'ramda'
})
],
devServer: {
contentBase: path.join(__dirname, '/public'),
port: 3131
}
}
这是src/index.js
。在这个地方我没有看到任何错误,所有应该工作正常。
import React from 'react'
import {render} from 'react-dom'
const App = () => (
<div>
<h1>Hello world!!</h1>
</div>
)
render(<App />, document.getElementById('root'))
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id=”root”></div>
</body>
</html>
该问题看起来是一个webpack配置问题,请检查此修复是否有效。
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/'
},
尝试添加斜杠 - <script src="/target/app.js"></script>