标签: commonschunkplugin

我得到了通用的要点,即CommonsChunkPlugin查看所有入口点,检查它们之间是否存在共同的包/依赖关系,并将它们分成自己的包.

所以,我们假设我有以下配置:

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...

如果我不使用捆绑 CommonsChunkPlugin

我最终会得到3个新的捆绑文件:

• entry1.bundle.js它包含来自entry1.js和的完整代码,jquery并包含自己的运行时
• entry2.bundle.js它包含来自entry2.js和的完整代码,jquery并包含自己的运行时
• vendors.bundle.js它包含来自jquery和的完整代码,some_jquery_plugin并包含自己的运行时

这显然很糟糕,因为我可能会jquery在页面中加载3次,所以我们不希望这样.

如果我捆绑使用 CommonsChunkPlugin

根据我传递给CommonsChunkPlugin任何以下任何参数的参数将发生:

• 情况1:如果我通过,{ name …

我需要帮助将以下代码从webpack 3迁移到4.

new webpack.optimize.CommonsChunkPlugin({
    minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
    name: "vendor",
    chunks: ["main"]
})

我有两个条目文件,只希望第一个的依赖项包含在供应商块中.第二个条目的依赖关系应该都保留在自己的bundle中.

我刚刚意识到,如果你使用动态加载模块require.ensure(),webpack将不会分析和块依赖关系.这在某种程度上是有道理的,人们可以争辩说,webpack不知道这些模块是否曾经被转移过,但我们是否可以强迫webpack完成这项工作呢？

例如:

app.js:

require.ensure([ 'module1.js' ], ( require ) => {
    // at some point
    require( 'module1.js' );
}, 'Module1');

require.ensure([ 'module2.js' ], ( require ) => {
    // at some point
    require( 'module2.js' );
}, 'Module2');

module1.js

let io = require( 'socket.io-client' );

module2.js

let io = require( 'socket.io-client' );

这个编译的结果是,这两个模块都将整个socket-io库"链接"到它们的块中.我最初的期望是,CommonsChunkPlugin将捕获那些requires并将那个大型库放入一个共同的块中.

new webpack.optimize.CommonsChunkPlugin( 'common' ),

但不起作用.当然我总是可以手动"解决"这个依赖,但我希望webpack能以某种方式解决这个问题吗？

我们有一个传统的服务器渲染应用程序(非SPA),其中每个页面都增加了vuejs

现有的webpack 3配置是

webpack.config.js

var webpack = require('webpack')
var path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: {
        shared: './shared.js',
        pageA: './pageA.js',
        // pageB: './pageB.js',
        // pageC: './pageC.js',
        // etc
    },

    resolve: {
        alias: { vue: 'vue/dist/vue.esm.js' },
    },

    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                sourceMap: true,
                            },
                        }, …

这是我的webpack.config.js文件:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  cache: true,
  devtool: 'source-map',
  entry: {
    app : [
      './src/index.js'
    ],
    vendor: ['lodash']
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
    pathinfo: true
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
      { test: /\.scss/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity)
  ]
};

这是我运行webpack-dev-server的脚本:

const webpack =require('webpack');
const WebpackDevServer = require('webpack-dev-server'); …

我想将我的供应商代码分成两个块,一个包含所有角度库,另一个包含其他所有内容.

我的角度应用程序有一个入口点,设置如下:

entry: {
    app: './path_to/app.js',
    vendor: ['jquery', 'moment', 'numeral'],
    'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs']
}

然后我使用CommonsChunkPlugin配置另外两个bundle:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.bundle.js'
})
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor.angular',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.angular.bundle.js'
})

这会生成3个文件:

Version: webpack 1.13.1
Time: 12719ms
                   Asset     Size  Chunks             Chunk Names
           app.bundle.js  19.2 kB       0  [emitted]  app
        vendor.bundle.js   484 kB       1  [emitted]  vendor
vendor.angular.bundle.js   652 kB       2  [emitted]  vendor.angular
   [0] multi vendor.angular 124 bytes {2} [built]
   [0] multi vendor 88 bytes {1} …

我有一个使用webpack构建的应用程序,它使用代码分割.我现在想要将所有符合特定条件的通用模块(在本例中node_modules)聚合在所有条目块和所有子块(通过代码拆分生成)到一个单独的公共块中.

如果我这样做:

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: 'vendor',
    minChunks: (module) => {
        const isVendor = module.context.split('/').some(dir => dir === 'vendor');
        return isVendor;
    },
}),

Webpack会将与该minChunks函数匹配的所有模块聚合到一个单独的公共块中,但仅适用于来自子块的模块 - 它不会将模块从条目块聚合到公共块中.结果,我有重复的模块出现在我的入口块和公共块中.

这怎么可能？

示例:https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

我正在开发一个由以下"实体"组成的项目:

• 静态网站的几页
• 一个应用程序
• 管理仪表板

在我最初webpack.config的设置中,我将每个实体作为不同entry点处理.例如,我会有类似的东西

entry: {
    vendor: [
        'jquery',
        'bootstrap',
        'bootstrap/dist/css/bootstrap.css'
    ],
    admin: [
        'admin.js',
        'admin.css'
    ],
    websitePageA: [
        'analytics.js',
        'websitePageA.js',
        'websitePageA.css'
    ],
    websitePageB: [
        'analytics.js',
        'websitePageB.js',
        'websitePageB.css'
    ],
    websitePageC: [
        'analytics.js',
        'websitePageC.js',
        'websitePageC.css'
    ],
    app: [
        'analytics.js',
        'app.js',
        'app.css'
    ]
}

当我申请时,CommonsChunkPlugin我会以这样的方式尝试将我自己的公共文件(例如analytics.js上面的文件)分离到他们自己的common包和供应商公共文件(例如jquery)到他们自己的vendor包中.

然而,这在语义上起作用,我对结果不满意,因为当我制作一个vendor据说应该包含每个供应商文件的包时,我并没有这样做.并非每个页面都需要各个页面所需的每个供应商文件,因此我的优化方式是我的vendor包只包含这些入口点之间的公共供应商文件.

经过考虑,我认为最好的做法是将我的配置分为3个,一个用于app实体,一个用于管理仪表板实体,一个用于整个网站.

所以我现在有4个config文件,一个用于上述3个实体中的每一个,另一个用于webpack.config.js导入其他3个实体并导出包含它们的数组.

我webpack.config.js看起来像这样

'use strict';

const appConfig …

我正在使用WebPack CommonsChunkPlugin来提取重复的代码并减少JavaScript代码的大小.我有两个html页面和两个条目.我还添加了ReactJs供应商条目.到目前为止,在webpack.config.js中我们有:

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    context: __dirname,
    entry: {
        react: ["react", "react-dom"],
        home: './assets/js/home.jsx',
        about: './assets/js/about.jsx',
    },

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'react',
            minChunks: Infinity
        }),

        new BundleAnalyzerPlugin(),
    ],

    module: {
        rules: [
            {
              test: /\.jsx?$/, 
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: { 
                  plugins: [["lodash", { "id": ["semantic-ui-react"] }]], …

我收到此错误

错误：webpack.optimize.CommonsChunkPlugin已删除，请config.optimization.splitChunks改用。

new webpack.optimize.CommonsChunkPlugin({
  filename: DEBUG ? 'bundle.js' : 'bundle.min.js',
  name: "vendor"
})