课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

来源：4-2 webpack区分打包类库代码及hash优化

佘小麦

2018-03-01 11:42

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

写回答 关注

15回答

  • 九月花开
    2018-03-05 15:35:25
    已采纳

    http://img1.mukewang.com/5a9cf3080001fa8205060606.jpg在config中添加以上代码后，这个new里面这两行就不需要了是吧？可是删除之后还是报错

    1 1

    佘小麦

    那两个new不用了,删了.

    2018-03-05 16:09:20

    共 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;


    0 0
  • 一只肥鹤
    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;


    0 0
  • 小飞1314
    2019-01-28 12:39:54

    new webpack.optimize.SplitChunksPlugin({

    name: 'vendor'

    }),


    0 0
  • 小飞1314
    2019-01-28 12:39:14

    new webpack.optimize.SplitChunksPlugin({

    name: 'vendor'

    }),


    0 0
  • 吃天狗的月亮
    2018-06-11 18:03:41

    https://img3.mukewang.com/5b1e48d00001478903460302.jpg按照楼上配置得到左边截图效果，可是怎样打包到指定路径呢？

    0 0
  • 慕沐0350453
    2018-05-27 15:38:02

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

    0 0
  • T王者归来
    2018-04-11 09:21:52

    https://www.webpackjs.com/guides/code-splitting/

    按官方的文档来做的，竟然不是最新的，也是醉了

    1 0

    慕UI630...

    官方的是英文的，这是翻译的啊

    2018-04-17 17:40:18

    共 1 条回复 >

  • 悟空工作室
    2018-03-26 18:46:23

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

    1 0

    慕粉9183...

    我是东北吉林的

    2019-06-27 15:06:08

    共 1 条回复 >

  • Albert_w
    2018-03-20 12:41:37

    感谢感谢！！！

    0 0
  • XPoet
    2018-03-09 09:59:13

    感谢楼主

    0 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

      }


    1 16

    慕_M

    你好，请问一下，我这样写之后还是会报错

    2019-02-17 01:01:47

    共 1 条回复 >

  • 佘小麦
    2018-03-01 13:40:29

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

    0 1
  • 佘小麦
    2018-03-01 13:29:20

    问题已经解决,将解决方法分享给遇到同样问题的朋友.

    这个是webpack 4.0版本写法发生改动导致的问题.

    在config里添加下边的代码,即可解决

    http://img3.mukewang.com/5a978f7400017a9f06250547.jpg

    1 11

    qq_小小白...

    这一段是要添加到哪里啊？ 求教

    2018-04-17 15:02:39

    共 1 条回复 >

  • 佘小麦
    2018-03-01 11:45:30

    根据提示,使用config.optimization.splitChunks 这个配置依然报错:

    TypeError: Cannot read property 'splitChunks' of undefined


    1 0

    qq_李筱仨...

    嗯，我也是报错的，不知道怎么搞

    2018-04-27 10:28:13

    共 1 条回复 >

Vue+Webpack打造todo应用

用前端最热门框架Vue+最火打包工具Webpack打造todo应用

84606 学习 · 787 问题

查看课程

相似问题

执行npm run build报错

回答 4

运行NPM run build报错

回答 2

配置之后build报错

回答 1

运行npm run build报错

回答 2

运行·npm run build 出错·

回答 4

打开慕课网App查看更多内容