使用Webpack将React应用投入生产

gabed123

在这里反应新手。我即将完成我的第一个React应用,但是在将其投入生产时遇到了问题

目前,我正在尝试运行

NODE_ENV=production webpack -p

在我的package.json文件中包含脚本

一切正常运行,但脚本似乎没有输出正确的生产index.html文件。例如,所有JS和CSS文件都有一个问号,并在其末尾添加了随机字符,如下所示

href="/css/app.css?287deee1465dba65696e"

另外,生产index.html文件似乎只在我的开发环境中的/src/index.html写了什么,但我希望它是在/src/App.js中写我的代码的内容。

我必须在某处放些东西,但是由于我对Webpack和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')

);

index.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>

webpack.config.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'
},

我敢肯定,我错过了一些细节,这些细节对于解决这个问题很有用,所以请让我知道要寻找和询问的正确事物。

gabed123

我设法弄清楚这个问题很简单。在我的webpack.config.js中,我必须在自己的ExtractTextPlugin设置中更改文件名删除路径开头的正斜杠后,我可以将所有内容正确输出到/ dist文件夹中。最终的工作设置如下所示。

 new ExtractTextPlugin({
        filename: 'css/[name].css',
        disable: !isProd,
        allChunks:true
    }),

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我使用react.js投入生产时出错

闪亮的应用程序投入生产

将分类器投入生产

React&Rails-Bootstrap样式已经投入生产

哪个是ChronicleMap的可投入生产的版本?

在uglify / webpack投入生产后,每个类的Class.name始终为“ e”

如何将在Hyperledger Composer上开发的应用程序投入生产?

投入生产-无法将安全性解析为一种类型

我应该将 Flutter Web 用于不应在夏季之前投入生产的网站项目吗?

有些资产没有投入生产

如何确保admob准备好投入生产?

JRuby准备好投入生产了吗?

Kubernetes投入生产。工作吊舱有问题

Hyperledger Composer-准备投入生产了吗?

您如何将有角度的项目投入生产?

Maven或常春藤?使用已投入生产的系统哪个更好?还有其他区别吗?

Immutable.js v4.0.0-rc.12 准备好投入生产了吗?

以编程方式确定是否在发布框架中投入生产

是否可以在已经批准并投入生产的订阅中添加免费试用期(iTunes Connect)?

Asp.net核心和Angular投入生产:不提供Spa服务

在投入生产之前,从持续集成管道中删除特定功能

Spring Boot 启动器依赖项是否可以投入生产?

Google Play:由于“草稿已投入生产”而无法发布到生产中,该怎么办?

React,使用webpack创建最佳生产包

APNS-将App停止生产并投入开发

使用 webpack 和 React 在开发/生产中配置 CSS 模块

如何使用Webpack打包“生产”我的React网站?

react - 生产中的 webpack sass/scss 模块

Webpack 4:React 库的生产模式失败