使用Webpack将React应用投入生产

Question

React newbie here. 在这里反应新手。 I'm just about finished my first React app but running into issues with putting it into production 我即将完成我的第一个React应用，但是在投入生产时遇到了问题

Currently, I'm attempting to run 目前，我正在尝试运行

NODE_ENV=production webpack -p

with a script in my package.json file. 在我的package.json文件中使用脚本。

Everything runs without issue but the script doesn't seem to be outputting the correct production index.html file. 一切正常运行，但是脚本似乎没有输出正确的生产index.html文件。 For instance, all of the JS and CSS files have a question mark and random characters appended to the end of them like this 例如，所有JS和CSS文件都有一个问号，并在其末尾添加了随机字符，如下所示

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

Also the production index.html file only seems to have what's written in the /src/index.html which is in my dev environment but I want it to be what's in /src/App.js where the meat of my code is written. 另外，生产index.html文件似乎只在我的开发环境中的/src/index.html中写了什么，但我希望它是/src/App.js中写我的代码的内容。

I must have something off somewhere but since I'm fairly new to both Webpack and React, I'm not sure where to begin to look. 我必须在某处放些东西，但是由于我对Webpack和React都很陌生，所以我不确定从哪里开始。 Below is my index.js, index.html, and a segment of my webpack.config.js that involves putting the code in production. 以下是我的index.js，index.html和webpack.config.js的一部分，其中涉及将代码投入生产。 index.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) 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 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'
},

I'm sure there are details I'm missing out that would be useful for solving this so please let me know the correct things to be looking for and asking. 我确定我缺少一些细节，这些细节对于解决此问题很有用，所以请让我知道要寻找和询问的正确事物。

Answer 1

I managed to figure out the issue which was fairly simple. 我设法弄清楚这个问题很简单。 In my webpack.config.js I had to change the filename in my ExtractTextPlugin setup. 在我的webpack.config.js中，我必须在自己的ExtractTextPlugin设置中更改文件名 。 After removing a forward slash I had at the beginning of the path, I was able to get everything to output correct in my /dist folder. 删除路径开头的正斜杠后，我可以使所有内容正确输出到/ dist文件夹中。 The final working setup is shown below. 最终的工作设置如下所示。

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

使用Webpack将React应用投入生产

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-23 16:26:37

使用Webpack将React应用投入生产

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-23 16:26:37

解决方案1
0 已采纳 2018-01-23 16:26:37