Javascript 使用Webpack将React应用程序投入生产
我是新手。我刚刚完成我的第一个React应用程序,但在投入生产时遇到了问题 目前,我正在尝试运行Javascript 使用Webpack将React应用程序投入生产,javascript,reactjs,web,webpack,yarnpkg,Javascript,Reactjs,Web,Webpack,Yarnpkg,我是新手。我刚刚完成我的第一个React应用程序,但在投入生产时遇到了问题 目前,我正在尝试运行 NODE_ENV=production webpack -p 使用我的package.json文件中的脚本 一切运行正常,但脚本似乎没有输出正确的产品index.html文件。例如,所有的JS和CSS文件都有一个问号和随机字符附加在它们的末尾,如下所示 href="/css/app.css?287deee1465dba65696e" 另外,production index.html文件似乎只包含
NODE_ENV=production webpack -p
使用我的package.json文件中的脚本
一切运行正常,但脚本似乎没有输出正确的产品index.html文件。例如,所有的JS和CSS文件都有一个问号和随机字符附加在它们的末尾,如下所示
href="/css/app.css?287deee1465dba65696e"
另外,production index.html文件似乎只包含在我的开发环境中的/src/index.html中编写的内容,但我希望它是在/src/App.js中编写代码的内容
我肯定在什么地方出了点什么事,但由于我对网页和React都相当陌生,我不确定从哪里开始寻找。下面是我的index.js、index.html和webpack.config.js的一部分,其中涉及将代码投入生产。
index.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')
);
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'
},
我确信我遗漏了一些细节,这些细节对解决这个问题很有用,所以请告诉我要寻找和询问的正确内容。我设法解决了这个问题,这相当简单。在我的webpack.config.js中,我必须更改ExtractTextPlugin设置中的文件名。删除路径开头的正斜杠后,我能够在我的/dist文件夹中正确输出所有内容。最终工作设置如下所示
new ExtractTextPlugin({
filename: 'css/[name].css',
disable: !isProd,
allChunks:true
}),
应用程序是否在开发中加载?是。它首先加载index.html(dev),然后在一瞬间加载App.js中的代码。网页包配置有时会让人头疼。我猜您的输出文件名发生了变化:您是否在该文件中发布了所有内容的网页包配置文件?否,这只是一个节选,我认为它最能处理生产产出。
new ExtractTextPlugin({
filename: 'css/[name].css',
disable: !isProd,
allChunks:true
}),