Question

我正在尝试设置webpack生产配置。一切顺利。但是，我意识到在使用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

有没有办法实现我想要的或者在类似情况下最好的生产方法？谢谢！

Answer 1

因为CommonsChunkPlugin的第一个参数是＆＃34; common＆＃34;它应该在哪里＆＃34; lib＆＃34;。该插件选择一个名称与其第一个参数值匹配的条目。

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

请注意＆＃34;供应商＆＃34;在CommonsChunkPlugin中再次指定了条目

Answer 2

你应该查看Webpack的DLL插件。

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

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

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

您的项目将包含DLL Reference插件，如您所见：

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

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

Webpack排除了CommonsChunkPlugin的条目

2 个答案: