问题描述
我正在尝试为 React 设置一个基本的 webpack 配置,并使用 webpack 开发服务器在开发模式下提供它。 Webpack 可以很好地编译所有内容,但是在使用 webpack 开发服务器时不提供文件...我将项目托管在 VPS 上,并使用样板 create-react-app 开发服务器测试了服务器是否可访问 - 确实如此。我可以看到该项目很好地转到“http://serverIPv4:3000”。 Webpack 开发服务器项目配置为在端口 9000 上提供服务 - 即使正在编译文件,这也不起作用。它也不适用于默认端口 8080 或 3000。我缺少什么?
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const config = {
entry: './src/index.js',output: {
path: path.resolve(__dirname,'dist'),filename: 'bundle.js'
},module: {
rules: [
{
test: /\.(js|jsx)$/,use: 'babel-loader',exclude: /node_modules/
},{
test: /\.css$/,use: [
'style-loader','css-loader'
]
}
]
},resolve: {
extensions: [
'.js','.jsx'
]
},devServer: {
contentBase: path.resolve(__dirname,compress: true,port: 9000
},};
module.exports = config;
devDependencies:
"webpack": "^5.11.1","webpack-cli": "^4.3.1","webpack-dev-server": "^3.11.1"
项目结构:
dist
|-index.html
src
|-App.js
|-index.js
|-styles.css
控制台输出:
ℹ 「wds」: Project is running at http://localhost:9000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/ubuntu/rcw-webpack/dist
ℹ 「wdm」: asset bundle.js 1.36 MiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 1.29 MiB 32 modules
modules by path ./src/ 4.32 KiB
modules by path ./src/*.js 3.65 KiB
./src/index.js 244 bytes [built] [code generated]
./src/App.js 3.41 KiB [built] [code generated]
modules by path ./src/*.css 681 bytes
./src/styles.css 327 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles.css 354 bytes [built] [code generated]
webpack 5.11.1 compiled successfully in 2535 ms
ℹ 「wdm」: Compiled successfully.
更新:package.json:
{
"name": "rcw-webpack","version": "1.0.0","description": "","main": "index.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","clean": "rm dist/bundle.js","dev": "webpack --mode development","start": "webpack serve --mode development --env development","build-prod": "webpack --mode production"
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"@babel/core": "^7.12.10","@babel/preset-env": "^7.12.11","@babel/preset-react": "^7.12.10","@types/react": "^17.0.0","@types/react-dom": "^17.0.0","babel-loader": "^8.2.2","css-loader": "^5.0.1","style-loader": "^2.0.0","ts-loader": "^8.0.14","typescript": "^4.1.3","webpack": "^5.11.1","webpack-dev-server": "^3.11.1"
},"dependencies": {
"react": "^17.0.1","react-dom": "^17.0.1","socket.io-client": "^3.0.5"
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)