即使在 webpack 配置中将其拆分后，供应商代码仍在 bundle.js 文件中 [英] Vendor code is still in bundle.js file even after splitting it in webpack config

问题描述

使用以下 webpack 配置，我仍然在 bundle.js 文件中获取供应商代码.(即使在代码拆分后，bundle.js 的大小仍然相同).我希望 bundle.js 中不应存在供应商代码

遵循某些链接，但没有帮助.(

'use strict';var webpack = require('webpack');模块.出口 = {上下文:__dirname + '/client/js',入口: {来源:['./init.jsx']，供应商:['反应'，'反应领域'，'还原'，'公理','拉姆达幻想'，'拉姆达','反应-json-树'，'反应工具提示'，'验证器']},输出: {文件名:[名称].bundle.js"},解决: {模块目录:['node_modules']，扩展名:['', '.js', '.jsx']},模块: {装载机: [{ 测试:/\.json$/, 加载器: 'json-loader' },{loader: 'babel-loader',排除:/node_modules/，询问: {预设:['反应'，'es2015'，'stage-0']}},{ 测试:/\.css$/, 加载器: "css-loader" },]},插件:[新的 webpack.optimize.CommonsChunkPlugin({name: '供应商',块:['供应商']，文件名:'vendor.js',minChunks:无穷大})],开发工具:'源地图'，节点:{控制台:真的，fs: '空',净:'空'，tls: '空'},目标:'网络'};

解决方案

根据 Webpack 文档 此处，CommonsChunkPlugin 已弃用，并在版本 4 之后删除.原因是 - 这可能是它不适用于您的原因，它已被证明在异步块上效率低下，并且也难以使用(例如:当 children 设置为 true 时，这仅适用于直接子代)因此配置不会包含具有共享模块的 3 级依赖项.

请选择 SplitChunksPlugin.这应该可以解决您的问题.

With the below webpack config, i am still getting vendor code in bundle.js file.( The size remains same for bundle.js even after code splitting). I want vendor code should not be present in bundle.js

Followed certain links, but it does'nt helped. (https://github.com/dmachat/angular-webpack-cookbook/wiki/Split-app-and-vendors)

'use strict';

 var webpack = require('webpack');

module.exports = {
context: __dirname + '/client/js',
entry: {
    source: ['./init.jsx'],
    vendor: ['react',
        'react-dom',
        'redux',
        'axios',
        'ramda-fantasy',
        'ramda',
        'react-json-tree',
        'react-tooltip',
        'validator']
},
output: {
    filename: "[name].bundle.js"
},
resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.jsx']
},
module: {
    loaders: [
        { test: /\.json$/, loader: 'json-loader' },
        {
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react', 'es2015', 'stage-0']
            }
        },
        { test: /\.css$/, loader: "css-loader" },
    ]
},

plugins: [new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['vendor'],
    filename: 'vendor.js',
    minChunks: Infinity
})
],

devtool: 'source-map',

node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
},

 target: 'web'
};

解决方案

According to Webpack documentation here, CommonsChunkPlugin is deprecated, and removed after version 4. The reason is - and this could be why it doesn't work with you, that it has been proven inefficient on async chunks, and also difficult to use (e.g: when children is set to true, that only applies to direct children) so a level 3 dependency with a shared module wouldn't be encompassed by the configuration.

Please, opt instead for the SplitChunksPlugin. This should fix your problem.

这篇关于即使在 webpack 配置中将其拆分后，供应商代码仍在 bundle.js 文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！