核心内容摘要
四川人BBBBB桑BBBB
介绍因为不确定打出的前端包所访问的后端IP需要对项目中IP配置文件单独拿出来方便运维部署的时候对IP做修改。
因此需要用webpack单独打包指定文件。
CommonsChunkPluginmodule.exports{entry:{app:APP_FILE// 入口文件},output:{publicPath:./dist/,//输出目录index.html寻找资源的地址path:BUILD_PATH,// 打包目录filename:[name].[chunkhash].js,// 输出文件名chunkFilename:[name].[chunkhash].js// commonChunk 输出文件}}先说一下publicPath 这边有一个注意的点即路径写成 ./dist 相对路径。
如果写成/dist/这种绝对路径有一个弊端是当nginx把前端的包没有放在根目录的情况下index.html会访问资源失败。
因此推荐写成相对路径但是当使用相对路径时有会存在一个潜在的问题即项目本身的路由访问如果是HTML5模式而不是使用hash时路由上有一个#号那么项目一样会部署失败。
angularreact都会有这样的问题vue没用过应该类似。
此时的解决办法是在index.html的head中添加base标签即headmetacharsetutf-8metahttp-equivX-UA-CompatiblecontentIEedge/basehref//headwebpack本身基于模块化因此大多数情况下我们仅需要一个入口文件就可以搞定。
而针对本次需求需要在app这个入口之外再添加一个入口文件。
即entry:{app:APP_FILE// 入口文件ip:IP_FILE},仅这样对webpack配置之后dist文件会成功打出app.xxx.js及ip.xxx.js但是打包出的项目还是会报错解决办法是维持IP的入口文件不变但是把它当作commonChunk来处理。
即在plugins中加入newwebpack.optimize.CommonsChunkPlugin({name:ip,minChunks:Infinity}),这样保证优先加载ip.xxx.js避免报错。
缺点这样打包有一个很明显的缺点即是打包出的文件是压缩的不方便对文件进行二次修改。
没有找到解决压缩的办法CopyWebpackPlugin最终解决办法还是通过让ip.js这个文件脱离项目的模块化然后在index.html中单独引用。
这是最开始就想到的解决办法但并不是自己想要的解决方案但无奈认知有限没有解决掉之前的问题。
解决流程首先在webpack引入CopyWebpackPlugin , 配置代码newCopyWebpackPlugin([{from:./src/config/ip.js,to:ip.js},])在index.html中单独引入script标签注意要配置一个随机后缀即scriptdocument.write(script typetext/javascript src./dist/ip.js?Math.random().toString(
.substr(
/script);/script防止ip.js因为缓存导致问题。
以上就解决了webpack单独打包指定js的问题。