比如我想将 jquery.min.js 和 socket.io.js 打包成 base.js,而我自己写的代码根据入口文件 app.js 编译成 build.js,那 Webpack 应该怎么做呢?
entry: {
vendor: ["jquery.min.js", "socket.io.js"],
build: "./app.js"
},
output: {
filename: "[name].js",
path: "dist/js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "base.js")
]
这样应该可以做到,将两个模块作为公共模块一起打包。
/** base.js **/
require("jquery.min.js");
require("socket.io.js");
/** app.js **/
/** 你的代码 **/
/** webpack.config.js **/
module.exports = {
entry: {
base: "./base.js",
build: "./app.js"
},
output: {
filename: "[name].js",
path: "dist/js"
}
}
大概意思就是这样的,其中的模块名称路径地址什么的你根据你自己的做一下修改。
根本思路是 webpack 指定多个入口文件之后就可以生成多个文件了,然后在你的页面中引用这两个文件就好了。
如果你的代码中有require("jquery")
之类的代码还需要用 external
属性排除一下,否则会将其合并打包进来。