使用 Webpack 将 React 应用程序投入生产

Question

这里是 React 新手。我即将完成我的第一个 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'
},

我确定我遗漏了一些对解决此问题很有用的细节，所以请告诉我要查找和询问的正确内容。

Answer 1

我设法找出了相当简单的问题。在我的 webpack.config.js 中，我不得不在 ExtractTextPlugin 设置中更改 filename。删除路径开头的正斜杠后，我能够在 /dist 文件夹中正确输出所有内容。最终的工作设置如下所示。

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

使用 Webpack 将 React 应用程序投入生产

Putting React app into production with Webpack

javascript

reactjs

web

webpack

yarnpkg