反应新手在这里。我的第一个React应用程序即将完成,但在投入生产时遇到了问题
目前,我正在尝试运行
NODE_ENV=production webpack -p
在我的
包裹json
文件
一切运行正常,但脚本似乎没有输出正确的产品
指数html
文件例如,所有JS和CSS文件都有一个问号和随机字符附加到它们的末尾,如下所示
href="/css/app.css?287deee1465dba65696e"
还有生产指数。html文件似乎只有
/src/索引。html
这在我的开发环境中,但我希望它是
/src/应用程序。js公司
我的代码是在哪里写的。
我一定是有什么不对劲的地方,但由于我对网页和React都相当陌生,我不知道从哪里开始找。下面是我的索引。js,索引。html和我的网页的一部分。配置。js,它涉及将代码投入生产。
指数js公司
//const css = require('./app.scss');
const css = require('./style/style.scss');
import React from 'react';
import ReactDOM from 'react-dom';
import anime from 'animejs';
import {App} from './App.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
指数html(src)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body >
<div id="root">
<h1>Webpack</h1>
</div>
</body>
</html>
网页包。配置。js公司
var isProd = process.env.NODE_ENV === 'production'; //true or false
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
var cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader'],
publicPath: '/dist'
})
var cssConfig = isProd ? cssProd : cssDev;
module.exports = {
entry:{
app: './src/index.js',
slideshow: './src/js/slideshow.js',
shapallax: './src/js/shapallax.js',
yona: './src/js/yona.js',
},
output: {
path: path.resolve(__dirname, "dist"),
// path: __dirname + '/dist',
filename: '[name].bundle.js'
},
我确信我遗漏了一些细节,这些细节对解决这个问题很有用,所以请让我知道要寻找和询问的正确内容。
