调用Webpack中的多个入口点

Invoke multiple entry points in Webpack

本文关键字：入口 Webpack 调用      更新时间：2024-05-28

我正在使用带有typescript和babel的webpack来管理我的客户端web应用程序。

我想要一个用于第三方脚本的vendor.js文件，一个main.js文件，以及可以根据需要加载的每页脚本，以提供页面的特定功能。

所有的脚本都在按照我的预期进行编译，但实际上只有vendor.js文件被调用。其他的被编译，但从未被调用。

下面是我的webpack.config.js文件。

'use strict';
let webpack = require('webpack');
module.exports = {
  entry: {
    main: './assets/js/main.ts',
    "single-page": './assets/js/src/new-loan.ts',
    vendor: [
      "svg4everybody"
    ]
  },
  output: {
    filename: './public/assets/js/[name].js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    })
  ],
  module: {
    loaders: [{
      test: /'.ts(x?)$/,
      loader: 'babel-loader!ts-loader',
      exclude: /node_modules/
    }]
  }
}

以及一个页面特定文件的示例。理想情况下，加载时，该文件将在页面上触发alert通知。

webpackJsonp([1],[
/* 0 */
/***/ function(module, exports) {
    'use strict';
    alert('test');
/***/ }
]);

我可以看到/为什么/警报没有触发（模块功能从未被调用），但我不知道如何配置webpack以使其按我希望的方式工作。

谢谢你的帮助。

我发现CommonsChunkPlugin正在覆盖您的配置中的vendor捆绑包。尝试将CommonsChunkPlugin的名称从vendor更改为common，并在所有文件中包含common捆绑包，然后再包含其他捆绑包。如果使用CommonsChunkPlugin，则只有公共捆绑包将包含核心的webpack模块加载程序助手函数，因此它必须嵌入到每个页面中。

new webpack.optimize.CommonsChunkPlugin({
  name: "common",
  minChunks: Infinity
})
相关文章：