webpack manifest.js分割的一个错误

介绍

一个webpack打包的应用中，js代码可以分为三类：
* 团队或者个人编写的代码。
* 第三方代码，例如react、vue等。
* 运行时各个模块之间连接交互的代码。

看一个具体的配置

const webpack = require('webpack');const CleanWebpackPlugin=require('clean-webpack-plugin');const path=require('path');const entries=require('./public/javascripts/getentries/merge.js')();const fs=require('fs');//get comoon moduleentries['vendor']=['react','react-dom'];entries['simplemde']=['simplemde'];//server Exclude node_modulesvar nodeModules = {};fs.readdirSync('node_modules')    .filter(function(x) {        return ['.bin'].indexOf(x) === -1;    })    .forEach(function(mod) {        nodeModules[mod] = 'commonjs ' + mod;    });const config=[{        entry:entries,        output:{            path:path.resolve(__dirname,'public/javascripts/dist'),            filename:'[name].js'        },         module: {            rules: [              {                test: /\.(js|jsx)$/,                exclude: /node_modules/,                loader: 'babel-loader',                query: {                    plugins: ['transform-runtime'],                    presets: ['es2015', 'stage-0','react'],                }              },              {                test:/\.css$/,                use: [                  { loader: "style-loader" },                  { loader: "css-loader" },                ]                },              {                test:'/\.(png|svg|jpg|gif)$/',                use:[                    'file-loader'                ]              }            ]         },        plugins:[            new CleanWebpackPlugin(['public/javascripts/dist']),            new webpack.optimize.CommonsChunkPlugin({                name:['vendor','simplemde','manifest']            })        ]    },{        entry:{            server:'./public/javascripts/server/server.js'        },        target: "node",        output:{            path:path.resolve(__dirname,'public/javascripts/dist'),            filename:'[name].js',            library:'serverRender',            libraryTarget: 'commonjs'        },        node: {            console: true,            global: true,            process: true,            Buffer: true,            __filename: true,            __dirname: true,            setImmediate: true        },         module: {            rules: [              {                test: /\.(js|jsx)$/,                loader: 'babel-loader',                exclude:/node_modules/,                query: {                    plugins: ['transform-runtime'],                    presets: ['es2015', 'stage-0','react'],                }             }            ]         },        externals:nodeModules    }];module.exports=config;

运行webpack其中会生成三类代码：
* 个人或团队应用代码。
* 三方代码，这里为 vendor.js，这里的配置将simplemde也单独提出来了，会生成一个simplemde.js，但是其也属于三方代码。
* manifest.js模块加载代码。

生成manifest.js注意点

做代码分割时，关键是如下语句，提出公共的部分（三方代码，模块加载代码manifest.js）

new webpack.optimize.CommonsChunkPlugin({                name:['vendor','simplemde','manifest']            })

此处manifest应该放在数组的最后如[‘vendor’,’simplemde’,’manifest’]，不能写成[‘vendor’,’manifest’,’simplemde’]，会导致的问题是不会生成manifest.js，原本manifest.js的代码被合并到simplemde.js中。