打包htmljs为⼀个⽂件,在vue-cli中如何将所有js以及css打包成
⼀个js⽂件
这样的需求不是很合理啊。具体参考楼上回答。
但⾮要实现也可以。
1、再怎么样,我也建议提取css建议。不然等待JS加载完,才显⽰样式。⽤户明显可以看出样式缺失,然后才有样式。手机上可以打html与css的app
提取使⽤的插件是⽤的extract-text-webpack-plugin。
2、从vue-cli @2.9.x版本的build/f.js 来看,会提取公共的JS代码到mainfest.js,vendor.js,vendor-async.js。如果不需要就注释即可。
刚好之前写了篇分析vue-cli构建的⽂章,分析vue-cli@2.9.3 搭建的webpack项⽬⼯程,附上⼀些代码和注释可供参考。
// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
/\.js$/.source) &&
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
// 把公共的部分放到 manifest 中
name: 'manifest',
// 传⼊ `Infinity` 会马上⽣成 公共chunk,但⾥⾯没有模块。
minChunks: Infinity
}),
/
/ This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// 提取动态组件
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
// 如果设置为 `true`,⼀个异步的 公共chunk 会作为 `options.name` 的⼦模块,和 `options.chunks` 的兄弟模块被创建。// 它会与 `options.chunks` 并⾏被加载。可以通过提供想要的字符串,⽽不是 `true` 来对输出的⽂件进⾏更换名称。async: 'vendor-async',
// 如果设置为 `true`,所有 公共chunk 的⼦模块都会被选择
children: true,
// 最⼩3个,包含3,chunk的时候提取
minChunks: 3
}),
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论