Внедрение приложения React в производство с помощью Webpack

Реагируйте новичка здесь. Я почти закончил свое первое приложение 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(источник)

<!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'
},

Я уверен, что есть детали, которые я упустил, которые были бы полезны для решения этой проблемы, поэтому, пожалуйста, дайте мне знать правильные вещи, которые нужно искать и спрашивать.


webpack reactjs yarnpkg javascript web
person gabed123    schedule 18.01.2018    source источник
comment
Приложение загружается в процессе разработки?   -  person Josan Iracheta    schedule 18.01.2018
comment
Да. Сначала он загружает index.html(dev), а через долю секунды загружается код из App.js.   -  person gabed123    schedule 18.01.2018
comment
Конфигурация Webpack иногда является занозой в заднице. Я предполагаю, что у вас есть что-то, что меняет имя выходного файла: webpack.js.org /configuration/output/#output-filename Является ли файл конфигурации веб-пакета всем, что вы разместили в этом файле?   -  person DataSwede    schedule 18.01.2018
comment
Нет, это просто отрывок из того, что, как мне кажется, больше всего касается производства.   -  person gabed123    schedule 18.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось выяснить проблему, которая была довольно простой. В моем webpack.config.js мне пришлось изменить имя файла в настройках ExtractTextPlugin. После удаления косой черты, которая была у меня в начале пути, я смог правильно вывести все в моей папке /dist. Окончательная рабочая установка показана ниже.

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