Javascript 网页包排除CommonChunkPlugin的条目

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

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等）捆绑在一个lib捆绑包中，并将普通应用程序组件（如user.js）捆绑在一个普通捆绑包中。为了做到这一点，我认为可能有一个选项来排除我不希望它们转到“公共”文件的文件。如果我使用这个输出，那么长期缓存库捆绑包的文件有什么意义呢？因为每当我在项目中获得一个公共组件时，它们都会进入公共捆绑包，内容散列会有所不同，但是这个库文件中没有任何变化，比如react、jquery、lodash等

无论如何，在构建过程结束时，我得到的是，所有内容仍然进入公共包，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

app..min.js->3.05KB
app2..min.js->3.05KB
lib..min.js->165字节（几乎没有！）
公共..js->678 KB

---

在类似的情况下，有什么方法可以实现我想要的，或者生产构建的最佳方法是什么？谢谢大家!

这是因为CommonChunkPlugin的第一个参数是“common”，应该是“lib”。插件将获取名称与其第一个参数值匹配的条目

从中选取一个简单的配置示例-

---

请注意，CommonChunkPlugin中再次指定了“供应商”条目。您应该查看Webpack的DLL插件

使用此插件，您可以将常见的第三方供应商依赖项（如React和friends）捆绑在一个DLL中，该DLL本质上只是一个JSON清单，与您的需求一起包装在网页包上下文中并缓存到磁盘

在项目代码中，您将拥有依赖于React和friends的共享组件，并且您将拥有依赖于共享组件以及React和friends的应用程序代码

您的项目将包含DLL引用插件，如您在此处所见：

---

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

yepp，没错，但是，我希望看到4个捆绑包，其中app.js是自包含的组件代码，app2.js也是包含sef的组件代码，lib.js“只有“react，lodash”之类的库，第4个是”应用程序中的commons“这是我创建的用户组件，而不是库。正如问题的标题所示，我想要实现的是创建两个公共空间，第一个只是第三方，第二个是我自己的子库，我不希望库和通用应用程序组件在同一个捆绑包中。谢谢你的回答，但我知道你想要的是->app.js、app2.js、coomon.js和lib.js。在common，js中，你想把所有你自己的代码都放在app和app2中？请确认。请尝试此-

新网页包。优化.commonChunkPlugin（{name:“common”，fileName:“app/common.[chunkhash].js”，chunks:[app，app2]}），

。这将只在指定的条目块中使用公共代码。更多信息。您正在使用两个CommonChunkPlugin实例，对吗？一个用于lib，正如我在回答中所指出的，另一个用于处理两个应用程序中的公共块。不，但我现在添加了，没关系。男士：）非常感谢，你很酷：）很棒的提示！DLLPlugin为我节省了这么多时间…我希望它能有更多的文档记录和推荐。一定有太多的网页用户使用了>2s的增量编译，但他们没有意识到有更好的方法…DLL工作得很好--我们已经将10多秒的重新编译时间缩短到了2-3秒左右。与HappyPack相结合，您的构建将非常快速。

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")
  ]
};