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 module
entries['vendor']=['react','react-dom'];
entries['simplemde']=['simplemde'];

//server Exclude node_modules
var 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中。