个人中心
gpt4 book ai didi

javascript - Webpack 分块。没有内容出现 - block 未加载

转载 作者：行者123 更新时间：2023-11-29 10:30:07 25 4
gpt4 key购买 nike

这一天我一直在努力解决这个恼人的问题，但我敢肯定，这个问题很简单。我试图将我的 bundle.js 分成 block 以优化网站加载时间。

这是我的 webpack.config 文件:

module.exports = {
devServer: {
historyApiFallback: true
},
entry: {
index: ["./src/index.js"],
vendor: [
  "react",
  "react-dom",
  "react-redux",
  "react-router",
  "react-router-dom",
  "redux"
]
},
output: {
path: __dirname + '/public/views',
filename: "[name].js",
publicPath: "/views/"
},
module: {
loaders: [
  {
    test: /\.js$/,
    loader: "babel-loader",
    exclude: [/node_modules/, /pdfmake.js$/]
  },
  {
    test: /\.json$/,
    loader: "json-loader"
  }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
  name: "vendor",
  filename: "vendor.js",
  minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
  name: "meta",
  chunks: ["vendor"],
  filename: "meta.js"
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
  title: "Deals",
  filename:  __dirname + "/views/index.ejs",
  template: __dirname + "/views/template.ejs",
  inject: false
}),
new PreloadWebpackPlugin({
  rel: "preload",
  as: "script",
  include: "all"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
]
};

这是我简化的 index.ejs，通过运行 webpack 代码创建的文件，来自 template.ejs :

<!DOCTYPE html>
<html lang="en">

<head>

    <link href="/pace.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/style.css">
    <link rel="canonical" href="http://verygoodprof.fr/" />
    <link rel="preload" as="script" href="/views/index.js">
    <link rel="preload" as="script" href="/views/vendor.js">
    <link rel="preload" as="script" href="/views/meta.js">
</head>

<body>

    <noscript>
        <a href="http://enable-javascript.com/">Javascript must me enabled to use this site.</a>
    </noscript>

    <div class="text-center root" id="root">

    </div>

</body>

</html>

在这里，我看到我有预加载的 block ，根据需要动态编写，并且这些 block 位于正确的文件夹中，是在运行 webpack 代码后创建的。

这是我的 index.js 文件(React)，声明为 webpack.config 文件中的索引条目

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <AppInit>
      <BrowserRouter>
        <div style={{ height: "100%" }}>
          <ProfRegisteringModal />
          <Switch>
            {/* <Route path="/inscription/:user" component={Registering} />
            <Route path="/inscription" component={Registering} />
            <Route path="/connexion" component={SigningIn} />
            <Route path="/equipe" component={TeamPres} />
            <Route path="/" component={AppContainer} /> */}
            <Route
              path="/inscription/:user"
              getComponent={(location, callback) => {
                require.ensure(
                  [],
                  function(require) {
                    callback(
                      null,
                      require("./components/registering/registering_landing_page.js")
                    );
                  },
                  "registerChunk"
                );
              }}
            />
            <Route
              path="/inscription"
              getComponent={(location, callback) => {
                require.ensure(
                  [],
                  function(require) {
                    callback(
                      null,
                      require("./components/registering/registering_landing_page.js")
                    );
                  },
                  "registerChunk"
                );
              }}
            />
            <Route
              path="/connexion"
              getComponent={(location, callback) => {
                require.ensure(
                  [],
                  function(require) {
                    callback(
                      null,
                      require("./containers/registering/signing_in.js")
                    );
                  },
                  "signinChunk"
                );
              }}
            />
            <Route
              path="/equipe"
              getComponent={(location, callback) => {
                require.ensure(
                  [],
                  function(require) {
                    callback(null, require("./components/team_pres.js"));
                  },
                  "teampresChunk"
                );
              }}
            />
            <Route
              path="/"
              getComponent={(location, callback) => {
                require.ensure(
                  [],
                  function(require) {
                    callback(null, require("./containers/app_container.js"));
                  },
                  "appContainerChunk"
                );
              }}
            />
          </Switch>
        </div>
      </BrowserRouter>
    </AppInit>
  </Provider>,
  document.querySelector(".root")
);

我注意到的第一件事是应该构建的 block 是为 vendor 和 meta 正确构建的，但不是为我的内部 React 组件构建的。但这不是主要问题，事实是，在本地运行服务器时，我根本看不到我的 React 应用。 index.ejs 文件在我检查控制台时已正确加载。

当使用包含所有内容(无 block )的简单 bundle.js 文件时，一切都运行良好。用 index.ejs 指向它作为 

<script src="/views/bundle.js"></script>

非常感谢您的帮助!

编辑

这个 webpack.config 文件让它工作(感谢@margaretkru):

module.exports = {
  devServer: {
    historyApiFallback: true
  },
  entry: {
    app:"./src/index.js",
    vendor: [
      "axios",
      "jquery",
      "react",
      "react-dom",
      "react-redux",
      "react-router",
      "react-router-dom",
      "redux"
    ]
  },
  output: {
    path: __dirname + '/public/views',
    filename: "[name].js",
    publicPath: "/views/"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: [/node_modules/, /pdfmake.js$/]
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      filename:  __dirname + "/views/index.ejs",
      template: __dirname + "/views/template.ejs",
      inject: 'body',
      chunks: ['vendor', 'app'],
      chunksSortMode: 'manual'
    }),
    new PreloadWebpackPlugin({
      rel: "preload",
      include: ["vendor", "app"]
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ]
};new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    }),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      filename:  __dirname + "/views/index.ejs",
      template: __dirname + "/views/template.ejs",
      inject: 'body',
      chunks: ['vendor', 'app'],
      chunksSortMode: 'manual'
    }),
    new PreloadWebpackPlugin({
      rel: "preload",
      include: ["vendor", "app"]
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ]
};

真正的问题不是加载脚本的顺序，而是我实际上并没有在“预加载”它们之后加载脚本:HTMLWebpackPlugin 的“注入(inject)”行有所帮助，因为它注入(inject)了这两行:

<script src="/views/vendor.js"/> 
<script src="/views/app.js"/>

在我的 index.ejs 主体中

最佳答案

在 index.ejs 中加载的脚本顺序不正确。现在是:

<link rel="preload" as="script" href="/views/index.js">
<link rel="preload" as="script" href="/views/vendor.js">

这意味着您的 index.js 将在 vendor.js 之前加载，从而导致您的应用根本不会出现。首先应加载应用程序的所有依赖项 (vendor.js)，然后才加载 index.js，因为您需要在执行自定义代码时存在依赖项。所以应该是:

<link rel="preload" as="script" href="/views/vendor.js">
<link rel="preload" as="script" href="/views/index.js">

编辑:

正如我们最终发现的那样，问题不在于脚本的顺序，而是由于脚本实际上并未加载到 html 中。为此，需要将它们作为 block 添加到 HtmlWebpackPlugin 中并注入(inject)到 index.html 中:

 new HtmlWebpackPlugin({
      title: "Deals",
      filename:  __dirname + "/views/index.ejs",
      template: __dirname + "/views/template.ejs",
      inject: 'body',
      chunks: ['vendor', 'index']
    })

此外， block meta 的配置已完全删除。所有其余的配置(包括 PreloadWebpackPlugin)都很好。

关于javascript - Webpack 分块。没有内容出现 - block 未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48280949/

25 4 0
文章推荐： javascript - 为什么 Object.keys([,1,,1]) 与 Object.keys([,1,undefined,1]) 不同？
文章推荐： ios - watch app和父iphone app之间的通信
文章推荐： mysql - 如何使用 Knex 迁移器 CLI 命令创建 mysql 数据库？
文章推荐： mysql - 在选择时插入 0 以表示空返回(在任务计划程序上运行的 SQL 脚本)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com