javascript - Webpack 排除 CommonsChunkPlugin 的条目

Question

我正在尝试设置 webpack 生产配置。一切看起来都很好。但是，我意识到在使用 commons chunk 插件时，它覆盖了预期的所有公共(public)文件。我想做的是，将公共(public)库模块和公共(public)应用程序模块分开。我的配置文件是:

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 和一个公共(public)组件 user.js。

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

无论如何，在构建过程结束时我所拥有的是所有东西仍然进入公共(public)包，而 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 的第一个参数是“common”，而它应该是“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")
  ]
};

请注意，“vendor”条目在 CommonsChunkPlugin 中再次指定