Webpack排除CommonsChunkPlugin的條目

Question

我正在嘗試設置webpack生產配置。一切看起來不錯。但是，我意識到，在使用公用塊插件時，它會按預期涵蓋所有共同文件。我想要做的是分離公共庫模塊和通用應用程序模塊。我的配置文件是：

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。

我想達到什麼是捆綁所有的庫相關的文件等反應，反應-DOM，lodash等在一個lib包，並像在公共束user.js的常見應用程序組件。爲了做到這一點，我想可能會有一個選項來排除我不希望它們轉到「常用」文件的文件。如果我使用這個輸出，庫bundle的長期緩存文件有什麼意義，因爲每當我在我的項目中獲得一個公共組件時，它們將進入公共包，並且內容哈希將會不同，但是這個庫中沒有任何變化等反應，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第一個參數是「共同」，它應該是「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，它本質上只是一個JSON清單與你的需要裹的WebPack上下文和緩存到磁盤一起去反應，朋友。

在項目的代碼，你將不得不依賴於反應，你的朋友共享組件，並且你將不得不依賴於你的共享組件的應用程序代碼，以及反應和朋友。

你的項目將納入DLL參考插件，你可以在這裏看到：

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

這將看到它，你的共享組件和應用程序代碼拉來自同一陣營和其他第三方模塊DLL捆綁。這可以幫助提高開發時間以及開發服務器和熱模塊重新加載的性能。