Javascript Web包在react.js中工作不正常
我使用Javascript Web包在react.js中工作不正常,javascript,reactjs,webpack,create-react-app,Javascript,Reactjs,Webpack,Create React App,我使用create react app命令创建了一个“hello world”react app,然后我尝试使用webpack运行相同的文件,但它无法正常工作,例如.ico,。css文件未呈现到屏幕上。。请帮我解决这个问题 webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname,
create react app
命令创建了一个“hello world”react app,然后我尝试使用webpack
运行相同的文件,但它无法正常工作,例如.ico
,。css
文件未呈现到屏幕上。。请帮我解决这个问题
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
// camelCase: true,
sourceMap: true
}
}
]
},
{
test: /\.svg$/,
loaders: [
'babel-loader',
{
loader: 'react-svg-loader',
query: {
jsx: true
}
},
]
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.(jpg|jpeg|gif|png|ico)$/,
exclude: /node_modules/,
loader:'file-loader?name=img/[path][name].[ext]&context=./app/images'
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
};
package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Andrew Mead",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"json-loader": "^0.5.7",
"live-server": "^1.2.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-svg-loader": "^2.1.0",
"style-loader": "^0.20.3",
"validator": "8.0.0"
},
"devDependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"webpack": "^2.7.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "2.5.1"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
其余文件与创建应用程序时自动生成的相同。帮我解决这个问题
Git提交所有更改
在cmd:>npm Run eject上运行此命令
转到生成的文件夹名称:config>webpack.config.dev.js>line#166(近似)CSS编译器
将代码附加到选项对象上
导入加载程序:1,
模块:真,
localIdentName:'[name].[local].[hash:base64:5]',
模块:真,
localIdentName:'[name].[local].[hash:base64:5]',
从“/App.css”导入类代码>
好的,
create react应用程序
已经有了自己的node\u模块
s中的网页配置、babel配置和其他所有配置
我可以看到您更改了start和build命令。此处设置的create react app
默认命令已运行调用webpack的脚本(使用babel等),配置正确(处理.ico
文件和其他所有内容)
如果你想自己处理它,你可以弹出你的createreact应用程序
。这意味着在项目的根目录上抛出所有配置文件和脚本,并删除为您安装的create react app
模块。您可以进一步了解它以及为您弹出项目的命令
如果要在不弹出的情况下更改网页包配置,可以使用。(因为我想保持来自create react应用程序repo的更新,我正在使用此替代方案)是否弹出CRA?@ChrisR否,如何执行?请解释步骤背后的原因。原因是
base64:5
转换
{
"presets": ["env", "react"]
}