Основной js-файл не импортирует созданный фрагментарный файл

Question

Я столкнулся с проблемой. Все входные js-файлы, определенные в веб-пакете, создаются, и то же самое относится и к частичным файлам вендоров. В веб-пакете у меня есть секция оптимизации, определенная как:

optimization: {
   splitChunks: {
       chunks: "all"
    }
}

Внутри моей папки dist все выглядит нормально: есть файлы контента, генерируются js и chunked vendor file, но когда я захожу на сайт, js файл выбирается правильно, но рядом нет ни моего контента, ни chunked vendor.

Неверный результат - пустой экран

Это моя конфигурация webpack, которую я использую. Без раздела оптимизации весь контент (img, шрифты) и js-файлы предоставляются с успехом.

module.exports = {
  entry: {
    tppauth: "./src/pages/tppauth.js",
    notfound: "./src/pages/notfound.js",
    servererror: "./src/pages/servererror.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
  },
  devServer: {
    contentBase: "/dist/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.(woff|woff2|eot|ttf|png|gif|svg)?$/,
        use: { loader: "file-loader" }
      },
      {
        test: /\.(less|css)$/,
        use: ["style-loader","css-loader","less-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      ['~']: __dirname
    }
  },
  optimization: {
    splitChunks : {
      chunks: 'all'
    }
  },
};

Мой файл JS, который отображает некоторые другие определенные компоненты

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import dateFormat from "dateformat";

import "~/Content/Styles/container.less";

class PaymentAuthorization extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...this.state,
      request: {}
    };
  }
  render() {
    return (
      <IntlProvider locale="fr" messages={messages["fr"]}>
        <ErrorBoundary>
          <div className="center">{ComponentToRender}</div>
        </ErrorBoundary>
      </IntlProvider>
    );
  }
}
ReactDOM.render(<PaymentAuthorization/>, document.getElementById("app"));

Мне не хватает какого-то дополнительного импорта в js-файл, когда я пытаюсь создать чанк-файлы? Действительный ответ - без секции отпимизации

Answer 1

Хорошо, после нескольких недель перерыва я нашел то, что сделал не так. Я не добавил <script src='...' /> теги для новых связанных файлов.

Я использовал html-webpack-plugin, чтобы получить свой html-шаблон и поместить в него необходимые файлы javascript, но это можно сделать и вручную. Это мой новый файл cshtml, где node_modules разделены на два отдельных файла:

@{
    Layout = "~/Views/Shared/LayoutPage.cshtml";
}<script type="text/javascript" src="/dist/vendor2.js"></script><script type="text/javascript" src="/dist/vendor1.js"></script><script type="text/javascript" src="/dist/tppauth.js"></script>

Answer 2

Попробуйте удалить параметр splitChunks, чтобы увидеть, работает ли он.

Вы можете просмотреть мой конфиг, как показано ниже

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

process.traceDeprecation = true;

module.exports = {
    entry: {
        admin: "./React/js/App/Modules/Admin/admin.js",
        client: "./React/js/App/Modules/Client/client.js",
        login: "./React/js/EntryPoint/Modules/Admin/Account/Login/Login.js",
        password: "./React/js/EntryPoint/Modules/Admin/Account/Password/Password.js",
        manageaccount: "./React/js/EntryPoint/Modules/Admin/Account/Index.js",
        categories: "./React/js/EntryPoint/Modules/Admin/Categories/Categories.js",
        tag: "./React/js/EntryPoint/Modules/Admin/Tag/Tag.js",
        post: "./React/js/EntryPoint/Modules/Admin/Post/Post.js",
        comment: "./React/js/EntryPoint/Modules/Admin/Comment/Comment.js",
        portal: "./React/js/EntryPoint/Modules/Admin/Portal/PortalIndex.js",
        ClientIndex: "./React/js/EntryPoint/Modules/Client/Index/ClientIndex.js",
        adminSettings: "./React/js/EntryPoint/Modules/Admin/Settings/Settings.js",
        socialLinks: "./React/js/EntryPoint/Modules/Shared/SocialLinks.js"
    },
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /jsx$/),
        new webpack.LoaderOptionsPlugin({
            options: {}
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Popper: ['popper.js', 'default']
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],
    resolve: {
        modules: [
            path.resolve('./React/js/App'),
            path.resolve('./React/js/App/Modules/Client'),
            path.resolve('./React/js/App/Modules/Adnmin'),
            path.resolve('./node_modules')
        ]
    },
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};