配置 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' })这个之后,执行npm run build,出现报错.

个回答

九月花开

2018-03-05 15:35:25

已采纳

在config中添加以上代码后，这个new里面这两行就不需要了是吧？可是删除之后还是报错

1

一只肥鹤: 2019-05-31 18:41:48

else{
    config.entry = {
        app: path.join(__dirname,'./src/index.js'),
        vendor:['vue'] 
    };
    config.output.filename = '[name].[chunkhash:8].js';
    config.module.rules.push({
        test: /\.styl/,
        use: ExtractPlugin.extract({
            fallback:'style-loader',
            use:[
                'css-loader',
                {
                    loader: "postcss-loader",
                    options: {
                        sourceMap:true,
                    }
                },
                'stylus-loader'
            ]
        })
    });
    config.plugins.push(
            new ExtractPlugin('styles.[chunkHash:8].css'),
    );
    config.optimization = {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: 'initial',
                    minChunks: 2, maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                }
            }
        },
        runtimeChunk: true
    }
}

module.exports = config;

一只肥鹤: 2019-05-31 18:40:46

//webpack4问题解决：
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const isDev = process.env.NODE_ENV === 'development'; /*package.json里面的dev判断*/

const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

//css分离打包 mini-css-extract-plugin  extract-text-webpack-plugin@next
const ExtractPlugin = require('extract-text-webpack-plugin');

const config  = {
//module.exports = {
    target: 'web',
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        // filename: "bundle.js",
        filename: "bundle.[hash:8].js", /*正式环境与开发环境进行区分*/
        path: path.join(__dirname,'dist'),
    },
    module: {
        rules: [
            {
                test:/\.vue$/,   /*使用vue-loader处理.vue文件*/
                loader: 'vue-loader'
            },/*{
                test: /\.css$/,
                use:['style-loader','css-loader'],
            },*/
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                use: [{
                        loader:'url-loader',
                        options: {
                            limit:1024,
                            name:'[name]-picf.[ext]'
                        }
                    }]
            },{
                test: /\.jsx$/,
                loader: 'babel-loader'
            }
        ]
    },
    /*错误提示：asset(s) 最大限制在244K。解决：修改webpack 的性能提示配置 */
    performance: {
        hints:'warning',   /*或者直接关闭hints:false*/
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000,
        //只给出 js 文件的性能提示
        assetFilter: function(assetFilename) {
            return assetFilename.endsWith('.js');
        }
    },
    plugins:[
        new VueLoaderPlugin(), /*Vue-loader在15.*之后的版本的使用都是需要带有VueLoaderPlugin的，还需另外单独配置css-loader*/
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV : isDev?'"development"':'"production"'
            }
        }),
        /*如果'"development"'不加引号，那么最后解析会变成process.env.NODE_ENV=development，没有development这个变量 缺少引号*/
        new HTMLPlugin(),
    ],
};

if(isDev){
    config.devtool = '#cheap-module-eval-source-map';/*在浏览器上页面可以调试，不加的话是vue，es6等的编译代码*/
    config.devServer = {
        port:8001,
        host:'localhost',/*既可以通过localhost:8000访问到，又可以通过127.0.0.1:8000,别人也可以通过自己的ip访问到*/
        overlay:{
            errors:true /*有任何错误都显示到网页*/
        },
        hot:true /*原来修改东西 页面自动刷新  现在不刷新，只更新内容*/
        /*historyFallback:{ //单页应用的映射 }*/
       // open:true,/*修改文件后默认打开浏览器*/
    };
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    );
    config.module.rules.push({
        test: /\.styl/,  /*注意这里没有$结束符，这样既可以匹配styl文件，又可以匹配stylus*/
        use: [
            'style-loader',
            'css-loader',
            {
                loader: "postcss-loader",
                options: {
                    sourceMap:true,
                }
            },
            'stylus-loader'
        ]
    })
}else{
    config.entry = {
        app: path.join(__dirname,'./src/index.js'),
        vendor:['vue']  /*将框架与业务代码单独打包，是浏览器尽可能久地缓存框架代码而不随着业务修改而刷新*/
    };
    config.output.filename = '[name].[chunkhash:8].js';
    config.module.rules.push({
        test: /\.styl/,
        use: ExtractPlugin.extract({
            fallback:'style-loader',
            use:[
                'css-loader',
                {
                    loader: "postcss-loader",
                    options: {
                        sourceMap:true,
                    }
                },
                'stylus-loader'
            ]
        })
    });
    config.plugins.push(
            new ExtractPlugin('styles.[chunkHash:8].css'),
    );
    config.optimization = {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: 'initial',
                    minChunks: 2, maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                }
            }
        },
        runtimeChunk: true
    }
}

module.exports = config;

小飞1314

2019-01-28 12:39:54

new webpack.optimize.SplitChunksPlugin({
name: 'vendor'
}),

0
小飞1314

2019-01-28 12:39:14

new webpack.optimize.SplitChunksPlugin({
name: 'vendor'
}),

0
吃天狗的月亮

2018-06-11 18:03:41

按照楼上配置得到左边截图效果，可是怎样打包到指定路径呢？

0
慕沐0350453

2018-05-27 15:38:02

https://www.skiy.net/201803014983.html

0
T王者归来

2018-04-11 09:21:52

https://www.webpackjs.com/guides/code-splitting/
按官方的文档来做的，竟然不是最新的，也是醉了

0
悟空工作室

2018-03-26 18:46:23

请问您也姓佘吗？咱俩同姓，你在哪里

0
Albert_w

2018-03-20 12:41:37

感谢感谢！！！

0
XPoet

2018-03-09 09:59:13

感谢楼主

0
佘小麦

2018-03-05 16:08:07

这是我的代码:
config.plugins.push(
new ExtractPlugin('styles.[contentHash:8].css')
)
config.optimization = {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2, maxInitialRequests: 5,
minSize: 0
},
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true
}
}
},
runtimeChunk: true
}

16
佘小麦

2018-03-01 13:40:29

具体可以查看webpack 4.0版本的修改http://ju.outofmemory.cn/entry/343762

1
佘小麦

2018-03-01 13:29:20

问题已经解决,将解决方法分享给遇到同样问题的朋友.
这个是webpack 4.0版本写法发生改动导致的问题.
在config里添加下边的代码,即可解决

11
佘小麦

2018-03-01 11:45:30

根据提示,使用config.optimization.splitChunks 这个配置依然报错:
TypeError: Cannot read property 'splitChunks' of undefined

0