Webpack排除了CommonsChunkPlugin的条目

Question

我正在尝试设置webpack的生产配置。一切看起来都很好。然而，我意识到，在使用commons插件时，它覆盖了所有共同的文件，就像预期的那样。我想要做的是，分离公共库模块和通用应用程序模块。我的配置文件是：

module.exports = {
  entry: {
    lib: ["react", "react-dom"],
    app: "./ui-v2/app/app.js",
    app2: "./ui-v2/app/app2.js"
  },
  output: {
    path: path.join(__dirname, "target/ui/v2"),
    filename: "/app/[name].[chunkhash].min.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.(png|jpg|svg)/,
        loader: "file-loader?name=img/[name].[hash].[ext]"
        // loaders: ["url", "image-webpack"]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader", {
          publicPath: __dirname
        })
      },
      {
        test: /\.(woff|woff2|ttf|eot)$/,
        loader: "file-loader?name=fonts/[name].[hash].[ext]"
      }
    ]
  },
  plugins: [
    clean,
    new webpack.optimize.CommonsChunkPlugin("common", "app/common.[chunkhash].js"),
    new webpack.ProvidePlugin({
      React: "react",
      ReactDOM: "react-dom",
      $: "jquery",
      _: "lodash"
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
      warnings: false
      sourceMap: true
    },
    mangle: {
    except: ["exports", "import", "$", "_", "require", "React", "ReactDOM"]
    }
    }),
    new ExtractTextPlugin("styles/[name].[contenthash].css"),
    new Manifest()
  ]
}

基本上，我在应用程序中有3个模块: app.js、app2.js和一个公共组件user.js。

我想要实现的是将所有与库相关的文件(如react、react-dom、lodash等)打包到库包中，并将像user.js这样的通用应用程序组件打包在一个公共包中。为了做到这一点，我认为可能有一个选项可以排除那些我不希望它们转到“公共”文件的文件。如果我使用此输出，为库包进行长期缓存文件的意义是什么，因为每当我在项目中获得一个公共组件时，它们将进入公共包中，内容哈希将有所不同，但是这个库文件中的任何变化都不会像react、jquery、分类法等。

总之，在构建过程结束时，我拥有的是所有东西仍然进入到公共包中，而且lib没有任何东西，文件大小是：

app.<hash>.min.js -> 3.05KB
app2.<hash>.min.js -> 3.05KB
lib.<hash>.min.js -> 165 Bytes (has almost nothing!)
common.<hash>.js -> 678 KB

在类似的情况下，是否有任何方法来实现我想要的，或者生产构建的最佳方法呢？谢谢!

Answer 1

这是因为CommonsChunkPlugin的第一个参数是“公共”，它应该是"lib“。插件以与其第一个参数的值相匹配的名称获取条目。

从webpack's wiki中选择一个简单的配置示例-

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

请注意，在CommonsChunkPlugin中再次指定了“供应商”条目

Answer 2

你应该看看Webpack的DLL插件。

https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll/README.md

使用这个插件，您可以在DLL中捆绑常见的第三方供应商依赖项，例如React和朋友，这本质上只是一个JSON声明，它与您的需求一起封装在webpack上下文中并缓存到磁盘上。

在您的项目代码中，您将拥有依赖于React和好友的共享组件，以及依赖于您的共享组件以及react和好友的应用程序代码。

您的项目将合并DLL参考插件，如下所示：

https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll-user/README.md

这将确保您的共享组件和应用程序代码、拉反应以及来自同一个DLL包的其他第三方模块。这有助于提高开发服务器和热模块重新加载的构建时间和性能。