webpack单独打包指定JS⽂件
背景
最近接到⼀个需求，因为不确定打出的前端包所访问的后端IP，需要对项⽬中IP配置⽂件单独拿出来，⽅便运维部署的时候对IP做修改。因此，需要⽤webpack单独打包指定⽂件。
CommonsChunkPlugin
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时（路由上有⼀个#号），那么项⽬⼀样会部署失败。angular，react都会有这样的问题，vue没⽤过，应该类似。此时的解决办法是，在index.html的head中添加base标签，即：
webpack打包流程 面试
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<base href="/">
</head>
}
webpack本⾝基于模块化，因此⼤多数情况下，我们仅需要⼀个⼊⼝⽂件就可以搞定。⽽针对本次需求，需要在app，这个⼊⼝之外再添加⼀个⼊⼝⽂件。即：
entry: {
app: APP_FILE // ⼊⼝⽂件
ip: IP_FILE
},
仅这样对webpack配置之后，dist⽂件会成功打出js及ip.xxx.js，但是打包出的项⽬还是会报错，解决办法是：维持IP的⼊⼝⽂件不变，但是把它当作commonChunk来处理。即在plugins中加⼊：
new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),
这样保证优先加载ip.xxx.js，避免报错。
缺点：这样打包有⼀个很明显的缺点，即是打包出的⽂件是压缩的，不⽅便对⽂件进⾏⼆次修改。（没有到解决压缩的办法）
CopyWebpackPlugin
最终解决办法，还是通过让ip.js这个⽂件脱离项⽬的模块化，然后在index.html中单独引⽤。（这是最开始就想到的解决办法，但并不是⾃⼰想要的解决⽅案，但⽆奈认知有限，没有解决掉之前的问题）。
解决流程：
⾸先在webpack引⼊, 配置代码：
new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])
在index.html中单独引⼊script标签，注意要配置⼀个随机后缀，即：
<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>
防⽌ip.js因为缓存导致问题。
以上，就解决了webpack单独打包指定js的问题。
webpack---webpack中经典实⽤的插件copy-webpack-plugin拷贝资源插件
在webpack中拷贝⽂件和⽂件夹
cnpm install --save-dev copy-webpack-plugin
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]);
//作⽤：把public ⾥⾯的内容全部拷贝到编译⽬录
from    定义要拷贝的源⽬录          from: __dirname + ‘/src/public’
to      定义要拷贝到的⽬标⽬录    from: __dirname + ‘/dist’
toType  file 或者 dir        可选，默认是⽂件
force  强制覆盖先前的插件可选默认false
context                        可选默认base context可⽤specific context
flatten 只拷贝⽂件不管⽂件夹默认是false
ignore  忽略拷贝指定的⽂件可以⽤模糊匹配

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。