时间戳

首页 > 解决方案 > 主 js 文件不导入创建的分块文件

javascript - 主 js 文件不导入创建的分块文件

问题描述

我遇到了一个问题。在 webpack 中定义的所有入口 js 文件都会被创建，对于分块的供应商文件也是如此。在 webpack 我有优化部分定义如下：

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

在我的 dist 文件夹中，一切看起来都很好：内容文件在那里，生成了 js 和分块供应商文件，但是当我访问站点时，js 文件被正确提取，但接下来我的内容都没有，也没有分块供应商被提取。

结果无效 - 空白屏幕

这是我使用的 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 文件中的一些额外导入？ 有效响应 - 没有优化部分

标签： javascriptreactjswebpack

解决方案

好的，休息几周后，我发现我做错了什么。我没有<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>

推荐阅读