webpack 公共模块出错

Question

webpack的CommonsChunkPlugin把很多js打包到一个js文件里
比如下面的主入口文件里我引用了多个js，然后把他们打包到一个公共js里
像下面的jweixin就会报
Uncaught TypeError: Cannot read property 'jWeixin' of undefined
这要怎么办？
主入口js

var objc = require('objc');
var $ = require('jquery');
var jweixin = require('jweixin');
var jqueryurl = require('jqueryurl');
var common = require('common');
var jquerylazyload = require('jquerylazyload');

Answer 1

配置webpack的几个坑

如何将多组文件，打包成多个包？

webpack 默认只能够将多个文件输出打包成一个文件，
如果需要将多组文件，分别进行打包

需要使用 CommonsChunkPlugin 这个原生插件

这个插件 是 webpack 下，首先需要

import webpack from "webpack";

假设我们要将 react 和 react-dom等代码库 打成一组包，但是，主要的业务代码打成另外一组包

// optimize 英：优化

entry: {
    app: ["./app.jsx"],
    vendor: [
        "react",
        "react-dom"
    ]
},

...

plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bunlde.js")
]

因为 webpack 默认会进行打包一次，所以插件内只要将库代码进行打包就可以了

上面的情景，是将两组文件进行打包

如果是三组以上的文件呢？

entry: {
    app: ["./app.jsx"],
    test: ["./test.js", "./test2.js"],
    vendor: [
        "react",
        "react-dom"
    ]
},

...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        names: ["vendor", "test"],
        minChunks: Infinity,
        filename: `/[name].bundle.js`
    })
]

需要传入 names 属性， 分别对应 entry 对象内的两个key

filename 控制的是输出的打包好的文件名